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.

Primary navigation dropdown configuration

---

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.

Primary navigation special labels/tokens

---

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

Primary navigation destinations/experiences dropdown

Source of tags for Destinations/Experiences dropdown in Primary navigation

---

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

Responsive navigation showing destinations/experiences dropdown

Responsive primary navigation

---

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

Error message when primary navigation is not configured properly

---

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