> 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/secondary-navigation.md). # Secondary Navigation This guide explains how Travio builds the footer from Ghost Secondary Navigation, including the special label syntax. ### Where It Is Configured In Ghost Admin: * **Settings** → **Navigation** → **Secondary navigation** Travio reads these items and programmatically builds footer columns, policy links, social icons, and optional widgets. *** ### How Footer Parsing Works Travio loops through secondary nav items in order and interprets each item by its label prefix/pattern. Supported patterns: * `#Heading` → starts a footer links column * Normal label (no prefix) → link under the current `#Heading` * `-Policy` → policy link row (bottom footer line) * `*socialSlug` → social icon link * `[token]` / `[token1|token2]` → footer widgets *** ### Footer Syntax Rules #### #Heading (links column title) Creates a new links column. Example: * `#Explore` Any normal items that come after it are added under this heading until another special token appears. #### Normal label (standard footer link) If a heading is active, it is added to that heading column. Example: * `Destinations` → `/destinations/` * `Experiences` → `/experiences/` * `Egypt` → `/tag/egypt/`

#### -Label (policy links) Adds links to footer policy/meta row (bottom), separated by `|`. Example: * `-Privacy Policy` → `/privacy/` * `-Terms` → `/terms/`

Configuration for policy links in Footer

#### \*slug (social links) Adds social icon links in footer social area. Example: * `*instagram` → `https://instagram.com/...` * `*x` → `https://x.com/...` Travio resolves icon by slug using built-in icon set or your injected `TRAVIO_CONFIG.footer.socialIcons` overrides.

Configuration of social media icons in footer

#### \[subscribe] (newsletter widget column) Adds the footer subscribe form column (Ghost Members subscribe UI).

Special label for Subscribe form in Footer

#### \[token1|token2] (tabbed post-feed widget) Creates tabbed footer post widget with exactly 2 tabs. Can be used to show either from `featured`, `latest`, or any `tag slug`. Example: * `[latest|featured]` * `[latest|destination]` * `[new-york|hiking]` Each tab loads posts via Ghost Content API. Important: * Only works fully with valid Content API key in code injection. * If key is missing/invalid, widget shows diagnostic/fallback message.

Special label for Tabbed section in Footer

*** ### Column Limits and Ordering * Travio supports up to 4 top footer columns. * Columns are rendered in the order parsed from secondary nav. * Overflow beyond supported structure can be ignored or not shown as expected. Build your footer intentionally with a clear order. *** ### Social Icons: Required Setup Social links appear only if you add \*slug items in secondary navigation. If you use custom SVGs in code injection: ```javascript window.TRAVIO_CONFIG = { footer: { socialIcons: { google: "" } } } ``` You must still add matching nav item: * `*google` → `https://...`

Add missing icons for social media in secondary navigation

Configure social media links in secondary navigation

No `*slug` item = no social icon rendered, even if custom SVG exists. Available social media icons in Travio: ```javascript facebook: "", instagram: "", linkedin: "", x: "", youtube: "", github: "", telegram: "", pinterest: "", tiktok: "", mastodon: "", threads: "", whatsapp: "", discord: "", reddit: "", twitch: "", spotify: "", medium: "", snapchat: "" ``` Social media aliases: ```javascript twitter: "x", "twitter-x": "x", "x-twitter": "x", linked_in: "linkedin", "linked-in": "linkedin", yt: "youtube", "you-tube": "youtube", fb: "facebook", ig: "instagram", insta: "instagram", "meta-threads": "threads", thread: "threads", tg: "telegram", wa: "whatsapp", "google-business": "google", "google-plus": "google", "xing": "xing", "dribbble": "dribbble", "behance": "behance", "vimeo": "vimeo", "stackoverflow": "stack-overflow", "stack-overflow": "stack-overflow", "apple-podcast": "podcast", "apple-podcasts": "podcast", "rss-feed": "rss" ``` *** ### Optional Link Badge Format in Footer Columns In normal heading links, Travio supports inline badge text in square brackets: * `Travel Deals [new]` * `City Guides [hot]` Footer renders `[new]` / `[hot]` as small badge next to link text.

*** ### Full Example Secondary Navigation Structure * `#Explore` → `#` * `Destinations` → `/destinations/` * `Experiences` → `/experiences/` * `Videos` → `/videos/` * `#Resources` → `#` * `About` → `/about/` * `Contact` → `/contact/` * `[latest|featured]` → `#` * `[subscribe]` → `#` * `*instagram` → `https://instagram.com/yourhandle` * `*x` → `https://x.com/yourhandle` * `*youtube` → `https://youtube.com/@yourchannel` * `-Privacy Policy` → `/privacy/` * `-Terms` → `/terms/` *** ### API Requirement for Tabbed Post Widget For `[token1|token2]` tabs, configure Content API key (recommended): ```html ``` Without this: * Footer tab feeds cannot fetch posts reliably. * Theme shows warning/fallback state. *** ### Common Issues * Footer looks empty: no valid secondary nav structure. * Headings show but no links: missing normal items after `#Heading`. * Social icons missing: forgot `*slug` entries. * Custom social SVG not applied: slug mismatch between `*slug` and `socialIcons` key. * Tabbed footer feed not loading: missing/invalid Content API key. * Policy links in wrong area: label missing `-` prefix. *** ### Quick Checklist * Secondary nav configured (not empty) * `#Heading` blocks created * Links placed under headings * Socials added with `*slug` * Policy links added with `-Label` * Optional widgets added: `[subscribe]`, `[tab1|tab2]` * Content API key configured if using tabbed feeds