LayoutNav

A header navigation component for rendering the docs header tree.

import { LayoutNav } from 'vike-vue-content/components/layout-nav'

Internally it:

• renders a horizontal navigation bar with flyout children on desktop
• renders a menu button and drawer navigation on mobile
• uses <Link> so the site base prefix is handled automatically

Props

LayoutNavItem has this shape:

type LayoutNavItem = {
  title: string
  path: string
  matchPath?: string
  children?: LayoutNavItem[]
}

Usage

The simplest case — LayoutNav reads headerNav and derives currentPath internally:

<script setup>
import { LayoutNav } from 'vike-vue-content/components/layout-nav'
</script>

<template>
  <LayoutNav />
</template>

Pass items or current-path explicitly only when you need to override the defaults (e.g. a filtered nav or a custom path-matching strategy).

When to use it

• you've marked top-level header sections in .config.yml via header.enable
• you want the built-in header navigation UI instead of writing your own dropdown or drawer
• you want desktop and mobile to share the same navigation data

Behavior

• renders nothing when there are no items
• recursively renders nested children via children
• automatically closes the mobile drawer after navigation
• automatically strips the site base prefix from the current path for active-state matching

If you want a fully custom header UI, you can consume the same pageContext.data.headerNav data described in Directory Config & Redirects.