TNavMenu / 导航菜单

NavMenu renders navigation items inside a TNavbar. Supports nested dropdown menus, icons, badges, active states, and fill layout. / 导航菜单在导航栏中渲染菜单项，支持嵌套下拉菜单、图标、徽章、激活状态和填充布局。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
items	NavMenuItem[]	[]	Menu items
fill	boolean	false	Fill width

NavMenuItem 接口

interface NavMenuItem {
  label: string
  icon?: Icon
  badge?: string | { text: string; color: string }
  href?: string
  active?: boolean
  disabled?: boolean
  children?: NavMenuItem[]
}

Basic Usage / 基础用法

<script setup lang="ts">
import { TNavMenu, TNavbar } from '@gulcc/tabler-vue'
import { IconHome, IconSettings } from '@tabler/icons-vue'

const items = [
  { label: 'Home', icon: IconHome, href: '/' },
  { label: 'Settings', icon: IconSettings, children: [
    { label: 'Profile', href: '/profile' },
    { label: 'Account', href: '/account' },
  ]},
]
</script>

<template>
  <TNavbar>
    <TNavMenu :items="items" />
  </TNavbar>
</template>