list-dropdownPrimary 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:

  • SettingsNavigationPrimary 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.


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.

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

Last updated