TNavbar / 导航栏

Navbar provides a responsive navigation bar for top or sidebar placement. Supports light/dark themes, sticky positioning, expand breakpoints, and collapsible mobile menu. / 导航栏提供响应式的顶部或侧边导航栏，支持亮色/深色主题、固定定位、展开断点和移动端折叠菜单。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
variant	'light' | 'dark'	'light'	Variant
sticky	boolean	false	Sticky positioning
expand	string	'md'	Responsive breakpoint
theme	'light' | 'dark'	—	Theme override

Basic Usage / 基础用法

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

<template>
  <TNavbar variant="light" expand="lg">
    <TNavbarBrand>
      <img src="/logo.svg" width="110" height="32" alt="Logo" />
    </TNavbarBrand>
    <TNavMenu :items="menuItems" />
  </TNavbar>
</template>

Tips / 避坑指南

• expand controls the responsive breakpoint at which the navbar expands (Bootstrap breakpoints)
• sticky pins the navbar to the top of the viewport
• Use TNavMenu with items for standard menu, or slot custom content