Navbar 导航栏

导航栏组件用于在页面顶部展示品牌标识、主导航菜单和工具栏操作入口。

TIP

⚠️ 受限于 whyframe 和 vitepress 的演示框架，下方交互演示可能呈现移动端自适应效果（汉堡按钮可见）。请点击顶部导航栏的「演示」链接查看完整的桌面端效果。

基本用法

通过 variant 控制背景色变体，theme 控制深色/浅色主题。

<TNavbar variant="transparent">
  <template #brand>
    <TNavbarBrand href="#">My App</TNavbarBrand>
  </template>
  <TNavMenu :items="menuItems" />
  <template #actions>
    <a class="nav-link px-0" href="#"><IconMoon class="icon icon-1" /></a>
  </template>
</TNavbar>

深色主题

设置 theme="dark" 启用深色模式。

<TNavbar theme="dark">
  <template #brand>
    <TNavbarBrand href="#">Dashboard</TNavbarBrand>
  </template>
  <TNavMenu :items="menuItems" />
</TNavbar>

主题色

使用 variant="primary" 配合深色主题。

<TNavbar variant="primary" theme="dark">
  ...
</TNavbar>

数据驱动菜单

通过 items 传入菜单配置数组，自动渲染导航链接和下拉菜单。

<TNavMenu :items="[
  { label: '首页', icon: IconStar, href: '#', active: true },
  { label: '项目', href: '#', badge: '3' },
  { label: '更多', children: [
    { label: '子项', href: '#' },
  ]},
]" />

多层菜单与激活高亮

支持无限级嵌套子菜单，深层 active 状态会递归高亮所有父级项。下例中"所有文章"处于激活态，其父级"内容管理"→"文章管理"均自动高亮。

<TNavMenu :items="[
  { label: '仪表盘', icon: IconStar, href: '#', active: true },
  { label: '内容管理', icon: IconStar, children: [
    { label: '文章管理', children: [
      { label: '所有文章', href: '#', active: true },
      { label: '分类管理', href: '#' },
    ]},
    { label: '页面管理', href: '#' },
  ]},
]" />

API

TNavbar Props

Prop	说明	类型	默认值
variant	背景色变体	'light' | 'dark' | 'transparent' | 'primary'	'light'
sticky	是否吸顶	boolean	false
theme	深色/浅色主题	'light' | 'dark'	—
expand	折叠断点	'sm' | 'md' | 'lg' | 'xl'	'md'
noPrint	是否不打印	boolean	true

TNavbar Slots

插槽	说明
brand	品牌/Logo 区域
actions	右侧工具栏
default	主导航菜单区
toggler	自定义移动端折叠按钮

TNavMenu Props

Prop	说明	类型	默认值
items	菜单配置	NavMenuItem[]	[]
fill	全宽填充	boolean	false

NavMenuItem

属性	类型	说明
label	string	显示文字
icon	Icon	图标组件
badge	string | { text, color }	徽标
href	string	链接地址
active	boolean	是否激活
disabled	boolean	是否禁用
children	NavMenuItem[]	子菜单（自动下拉）

TNavbarBrand Props

Prop	说明	类型	默认值
logo	Logo 图片 URL	string	—
href	跳转链接	string	'.'
logoWidth	图片宽度	number	110
logoHeight	图片高度	number	32