顶栏导航组件，支持嵌套菜单和移动端抽屉导航。

LayoutNav

顶栏导航组件，用来渲染 docs header 的导航树。

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

它内部会：

桌面端渲染横向导航和悬浮子菜单
移动端渲染菜单按钮，并通过抽屉展示同一份导航树
使用 <Link> 处理站点 base 前缀

Props

Prop	类型	默认值	说明
`items`	`LayoutNavItem[]`	`[]`	顶栏导航项数组，支持 `children` 嵌套。
`currentPath`	`string`	`''`	当前路径，用于高亮激活项。

LayoutNavItem 结构如下：

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

用法

最常见的来源是 docs 数据加载器注入的 pageContext.data.headerNav：

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

何时使用

你已经在 .config.yml 里通过 header.enable 标出了需要进入顶栏的目录
你想复用框架内置的 header 导航样式，而不是自己写 dropdown / drawer
你希望桌面端和移动端共用同一份导航数据

行为

没有导航项时不渲染任何内容
子项通过 children 递归渲染
移动端点击菜单项后会自动关闭抽屉
如果站点部署在非 / base 下，建议传入去掉 base 前缀后的 currentPath

如果你想完全自定义 header UI，也可以直接消费目录配置与重定向里提到的 pageContext.data.headerNav 数据。