vike-vue-content

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

LayoutNav

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

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

它内部会：

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

Props

Prop类型默认值说明
itemsLayoutNavItem[]自动取自 pageContext.data.headerNav顶栏导航项数组，支持 children 嵌套。
currentPathstring自动取自 pageContext.urlPathname（已去除 base）当前路径，用于高亮激活项。

LayoutNavItem 结构如下：

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

用法

最简单的用法——LayoutNav 自动读取 headerNav 并派生 currentPath：

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

<template>
  <LayoutNav />
</template>

只有当你需要覆盖默认行为（比如过滤导航项或自定义路径匹配策略）时，才需要显式传入 items 或 current-path。

何时使用

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

行为

  • 没有导航项时不渲染任何内容
  • 子项通过 children 递归渲染
  • 移动端点击菜单项后会自动关闭抽屉
  • 自动去除站点 base 前缀以匹配激活态路径

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