Navigation

Overview

All navigation is configured in a single file: content/config/navigation.yml. This controls the header menu, footer columns, and optional site banner.

The navigation config is loaded once in app.vue and provided to all components via Vue's provide/inject system.

Full Example

banner:
  id: launch-2026
  icon: i-lucide-megaphone
  title: "We just launched! Check out our offer."
  to: /offers/launch
  color: primary
  close: true
  actions:
    - label: Learn More
      to: /offers/launch
      trailingIcon: i-lucide-arrow-right
      color: primary
      variant: solid
      size: xs

header:
  title: My Product
  socials:
    x: https://x.com/yourhandle
    github: https://github.com/your-org
  navigation:
    - label: Docs
      icon: i-lucide-book-open
      to: /docs/getting-started
    - label: About
      icon: i-lucide-info
      to: /about
    - label: Pricing
      icon: i-lucide-credit-card
      to: /offers/pricing
  showSearch: true
  showColorMode: true

footer:
  columns:
    - label: Product
      children:
        - label: Features
          icon: i-lucide-star
          to: /features
        - label: Pricing
          to: /offers/pricing
    - label: Company
      children:
        - label: About
          to: /about
        - label: Blog
          to: https://blog.example.com
          target: _blank
  bottom:
    - label: Privacy
      to: /privacy
    - label: Terms
      to: /terms

Header

The header component (AppHeader) renders:

• Logo with site name (from app.config.ts)
• Navigation links from header.navigation (desktop menu)
• Social icons from header.socials
• Search button (if showSearch: true)
• Color mode toggle (if showColorMode: true)
• Mobile drawer with full content navigation tree

Header navigation links are defined manually in YAML — they are not auto-generated from the content tree.

Footer

The footer component (AppFooter) renders:

• Column groups from footer.columns — each column has a label and children links
• Bottom links from footer.bottom — a single row of links below columns
• Logo and site name
• Social icons from site config
• Copyright line with business name and founding year
• "Built with Foundry" branding with version

Banner

The banner (AppBanner) is an optional site-wide notification bar above the header.

To disable the banner, omit the banner key entirely or set it to an empty object.

The banner respects the $route.meta.banner flag — layouts and route rules can disable it per-page.

Page Meta Flags

Individual layouts can hide the header, footer, or banner via page meta:

routeRules: {
  '/landing': {
    appLayout: 'landing',
    // The landing layout doesn't set these, but you could in custom layouts
  },
}

In custom layouts or pages, set meta flags:

definePageMeta({
  header: false,   // Hide header
  footer: false,   // Hide footer
  banner: false,   // Hide banner
})

The app.vue template checks these flags:

<AppBanner v-if="$route.meta.banner !== false" />
<AppHeader v-if="$route.meta.header !== false" />
<AppFooter v-if="$route.meta.footer !== false" />