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/

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.

Adds the footer subscribe form column (Ghost Members subscribe UI).

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.

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 links appear only if you add *slug items in secondary navigation.

If you use custom SVGs in code injection:

window.TRAVIO_CONFIG = {
  footer: {
    socialIcons: {
      google: "<svg...></svg>"
    }
  }
}

You must still add matching nav item:

*google → https://...

No *slug item = no social icon rendered, even if custom SVG exists.

Available social media icons in Travio:

facebook: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3\" /></svg>",
instagram: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4l0 -8\" /><path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" /><path d=\"M16.5 7.5v.01\" /></svg>",
linkedin: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M8 11v5\" /><path d=\"M8 8v.01\" /><path d=\"M12 16v-5\" /><path d=\"M16 16v-3a2 2 0 1 0 -4 0\" /><path d=\"M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10\" /></svg>",
x: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 4l11.733 16h4.267l-11.733 -16l-4.267 0\" /><path d=\"M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772\" /></svg>",
youtube: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8\" /><path d=\"M10 9l5 3l-5 3l0 -6\" /></svg>",
github: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5\" /></svg>",
telegram: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4\" /></svg>",
pinterest: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-pinterest\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M8 20l4 -9\" /><path d=\"M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7\" /><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" /></svg>",
tiktok: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-tiktok\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917\" /></svg>",
mastodon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-mastodon\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944\" /><path d=\"M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722\" /></svg>",
threads: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-threads\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7 -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1\" /></svg>",
whatsapp: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9\" /><path d=\"M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1\" /></svg>",
discord: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-discord\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\" /><path d=\"M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\" /><path d=\"M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3\" /><path d=\"M7 16.5c3.5 1 6.5 1 10 0\" /></svg>",
reddit: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-reddit\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14l.999 0\" /><path d=\"M12 8l1 -5l6 1\" /><path d=\"M18 4a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" /><path d=\"M8.5 13a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0\" fill=\"currentColor\" /><path d=\"M14.5 13a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0\" fill=\"currentColor\" /><path d=\"M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5\" /></svg>",
twitch: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-twitch\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 5v11a1 1 0 0 0 1 1h2v4l4 -4h5.584c.266 0 .52 -.105 .707 -.293l2.415 -2.414c.187 -.188 .293 -.442 .293 -.708v-8.585a1 1 0 0 0 -1 -1h-14a1 1 0 0 0 -1 1l.001 0\" /><path d=\"M16 8l0 4\" /><path d=\"M12 8l0 4\" /></svg>",
spotify: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-spotify\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" /><path d=\"M8 11.973c2.5 -1.473 5.5 -.973 7.5 .527\" /><path d=\"M9 15c1.5 -1 4 -1 5 .5\" /><path d=\"M7 9c2 -1 6 -2 10 .5\" /></svg>",
medium: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-medium\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" /><path d=\"M8 9h1l3 3l3 -3h1\" /><path d=\"M8 15l2 0\" /><path d=\"M14 15l2 0\" /><path d=\"M9 9l0 6\" /><path d=\"M15 9l0 6\" /></svg>",
snapchat: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-brand-snapchat\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16.882 7.842a4.882 4.882 0 0 0 -9.764 0c0 4.273 -.213 6.409 -4.118 8.118c2 .882 2 .882 3 3c3 0 4 2 6 2s3 -2 6 -2c1 -2.118 1 -2.118 3 -3c-3.906 -1.709 -4.118 -3.845 -4.118 -8.118m-13.882 8.119c4 -2.118 4 -4.118 1 -7.118m17 7.118c-4 -2.118 -4 -4.118 -1 -7.118\" /></svg>"

Social media aliases:

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.

#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/

For [token1|token2] tabs, configure Content API key (recommended):

<script>
window.TRAVIO_CONFIG = {
  contentApiKey: "YOUR_CONTENT_API_KEY",
  footer: {
    apiUrl: "https://YOUR_DOMAIN/ghost/api/content"
  }
};
</script>

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

PreviousPrimary Navigation NextDevelop & Edit Travio

Last updated 18 days ago

Secondary Navigation

Where It Is Configured

How Footer Parsing Works

Footer Syntax Rules

#Heading (links column title)

Normal label (standard footer link)

-Label (policy links)

[token1|token2] (tabbed post-feed widget)

Column Limits and Ordering

Optional Link Badge Format in Footer Columns

Full Example Secondary Navigation Structure

API Requirement for Tabbed Post Widget

Common Issues

Quick Checklist

hashtagWhere It Is Configured

hashtagHow Footer Parsing Works

hashtagFooter Syntax Rules

hashtag#Heading (links column title)

hashtagNormal label (standard footer link)

hashtag-Label (policy links)

hashtag*slug (social links)

hashtag[subscribe] (newsletter widget column)

hashtag[token1|token2] (tabbed post-feed widget)

hashtagColumn Limits and Ordering

hashtagSocial Icons: Required Setup

hashtagOptional Link Badge Format in Footer Columns

hashtagFull Example Secondary Navigation Structure

hashtagAPI Requirement for Tabbed Post Widget

hashtagCommon Issues

hashtagQuick Checklist

Where It Is Configured

How Footer Parsing Works

Footer Syntax Rules

#Heading (links column title)

Normal label (standard footer link)

-Label (policy links)

*slug (social links)

[subscribe] (newsletter widget column)

[token1|token2] (tabbed post-feed widget)

Column Limits and Ordering

Social Icons: Required Setup

Optional Link Badge Format in Footer Columns

Full Example Secondary Navigation Structure

API Requirement for Tabbed Post Widget

Common Issues

Quick Checklist