vike-vue-content

Header navigation component with nested menus and a mobile drawer.

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

PropTypeDefaultDescription
itemsLayoutNavItem[][]Header navigation items, with optional nested children.
currentPathstring''Current path used to highlight the active item.

LayoutNavItem has this shape:

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

Usage

The most common source is pageContext.data.headerNav, injected by the docs data loader:

<script setup lang="ts">
import { computed } from 'vue'
import { usePageContext } from 'vike-vue/usePageContext'
import { LayoutNav } from 'vike-vue-content/components/layout-nav'
import type { DocsHeaderNavItem } from 'vike-vue-content/shared/types'

const pageContext = usePageContext()

const headerNav = computed<DocsHeaderNavItem[]>(() => {
  const data = pageContext.data as { headerNav?: DocsHeaderNavItem[] } | undefined
  return data?.headerNav ?? []
})

const currentPath = computed(() => {
  const pathname = pageContext.urlPathname
  const base = (pageContext as { _baseServer?: string })._baseServer ?? '/'

  if (base === '/' || !pathname.startsWith(base)) {
    return pathname
  }

  const trimmed = pathname.slice(base.length)
  return trimmed.startsWith('/') ? trimmed : `/${trimmed}`
})
</script>

<template>
  <LayoutNav :items="headerNav" :current-path="currentPath" />
</template>

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
  • if your site is deployed under a non-root base, prefer passing currentPath without that base prefix

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