> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/navigation/primary-navigation.md).

# Primary Navigation

This guide explains how Travio’s primary header navigation works, including dropdown syntax, special tokens, and configuration rules.

### Where It Is Configured

In Ghost Admin:

* **Settings** → **Navigation** → **Primary navigation**

Travio reads these items and builds the header menu dynamically.

<div data-with-frame="true"><figure><img src="/files/mer93rNuXOCyn93OKTae" alt=""><figcaption><p>Primary navigation dropdown configuration</p></figcaption></figure></div>

***

### How Travio Parses Primary Navigation

Unlike basic themes, Travio supports structure syntax directly in menu labels:

* `+` prefix = parent menu (dropdown trigger)
* `-` prefix = child item (dropdown entry under latest parent)

So menu hierarchy is controlled by label prefixes in Ghost Navigation.

***

### Dropdown Syntax Rules

#### Parent item

Use `+` at the beginning of label.\
Example:

* `+Guides` → `#`

#### Child item

Use `-` at the beginning of label, immediately after a parent.

Example:

* `-City Guides` → `/tag/city-guides/`
* `-Food Trails` → `/tag/food-trails/`

These become dropdown options under `Guides`.

#### Normal link

No prefix = standard top-level nav link.

Example:

* `Articles` → `/articles/`

***

### Valid Example Structure

* `Home` → `/`
* `+Explore` → `#`
* `-Destinations` → `/destinations/`
* `-Experiences` → `/experiences/`
* `Articles` → `/articles/`
* `Videos` → `/videos/`

Result:

* Explore renders as dropdown
* Destinations/Experiences render as child links inside it
* Others render as normal links

***

### Special Primary Nav Tokens

Travio also supports these special labels as standalone items:

* `[destinations]` - Shows Destinations dropdown in the primary navigation.
* `[experiences]` - Shows Experiences dropdown in the primary navigation.
* `[signin]` - Shows Sign In button in the primary navigation. Changes to Account button for logged in members.
* `[signup]` - Shows Sign Up button in the primary navigation. Changes to Account button for logged in members.
* `[subscribe]` - Shows Subscribe button in the primary navigation.
* `[search]` - Shows Search button in the primary navigation. If not added in Primary Navigation, search button will be hidden.

These are not normal links. They tell Travio to show dedicated destination/experience selector controls in header.

<div data-with-frame="true"><figure><img src="/files/xbNCWu7WGTX2e4lSZYKg" alt=""><figcaption><p>Primary navigation special labels/tokens</p></figcaption></figure></div>

***

### Requirement for Special Tokens

For `[destinations]` / `[experiences]` to work:

* Theme settings must have valid slug lists in:
  * `@custom.destinations`
  * `@custom.experiences`

If token exists but related setting is empty:

* Travio hides that special control
* Theme logs warning and may show a configuration message

<div data-with-frame="true"><figure><img src="/files/yU1xLd9CnwFGhDp1y3da" alt=""><figcaption><p>Primary navigation destinations/experiences dropdown</p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/aDyaD9WzI7LAIqkTY85N" alt=""><figcaption><p>Source of tags for Destinations/Experiences dropdown in Primary navigation</p></figcaption></figure></div>

***

### Mobile vs Desktop Behavior

Travio renders navigation responsively:

* Desktop: hover/click dropdown behavior with expanded menus
* Mobile: collapsible nav, tap-to-toggle dropdown behavior
* Special destination/experience pickers also adapt by viewport

<figure><img src="/files/3zJtkFcHKS0T9s7tePxI" alt="" width="375"><figcaption><p>Responsive navigation showing destinations/experiences dropdown</p></figcaption></figure>

<figure><img src="/files/FjHw6Rj5qhvqH2fiT8h9" alt="" width="375"><figcaption><p>Responsive primary navigation</p></figcaption></figure>

***

### Accessibility and Interaction Behavior

Travio adds accessibility behavior for dropdown menus:

* `aria-expanded` state toggles on open/close
* Keyboard support (Enter, Space, Escape)
* Click-outside closes active dropdown
* Only one primary dropdown remains open at a time

***

### Configuration Validation and Warnings

If navigation is malformed, Travio tries to fail gracefully.

Examples of invalid patterns:

* Child item (`-Something`) without preceding parent
* Empty label after stripping `+`/`-`

In such cases:

* Theme logs warnings in browser console
* Header may show a nav configuration warning message

<div data-with-frame="true"><figure><img src="/files/739l7KUhVRqPnCrAFpbZ" alt=""><figcaption><p>Error message when primary navigation is not configured properly</p></figcaption></figure></div>

***

### Quick Setup Checklist

* Primary menu created in Ghost Admin
* Dropdown labels correctly prefixed (`+` / `-`)
* Special tokens used only if matching theme settings exist
* Links tested for desktop + mobile
* No console warnings for malformed nav structure