Navbar 导航栏

基于 BrConfigProvider 实现全局主题配置，支持响应式折叠、吸顶效果和移动端适配的企业级导航栏。提供灵活的子组件，可根据业务需求组合出复杂的导航结构。

组件特性

📐 灵活定位：支持 sticky 和 fixed 定位模式。
➡️ 边框样式：支持 bordered 属性添加边框样式。
📱 响应式折叠：在小屏幕自动折叠为汉堡菜单。
⬆️ 滚动隐藏：支持 scrollHide 属性在滚动时隐藏导航栏。
🌤️ 透明样式：支持 transparent 属性实现覆盖型导航栏。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

基础的导航栏包含左侧品牌 Logo，中间导航项，以及右侧的操作按钮。

<script setup>
import { BrNavbar, BrNavbarBrand, BrNavbarContent, BrNavbarItem, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-0">
    <BrNavbarBrand>
      <span class="text-xl font-bold">BreezeUI</span>
    </BrNavbarBrand>
    <BrNavbarContent class="hidden sm:flex gap-6" justify="center">
      <BrNavbarItem href="#" is-active>Home</BrNavbarItem>
      <BrNavbarItem href="#">Products</BrNavbarItem>
      <BrNavbarItem href="#">About Us</BrNavbarItem>
    </BrNavbarContent>
    <BrNavbarContent justify="end">
      <BrButton variant="outline" size="sm" class="mr-2">Login</BrButton>
      <BrButton size="sm">Sign Up</BrButton>
    </BrNavbarContent>
  </BrNavbar>
</template>

带下拉菜单

结合 BrDropdown 组件实现多级下拉导航项。

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrDropdown, 
  BrDropdownTrigger, 
  BrDropdownContent, 
  BrDropdownItem, 
  BrDropdownSeparator 
} from '@breezeui/vue'
import { ChevronDown } from 'lucide-vue-next'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-10">
    <BrNavbarBrand>
      <span class="text-xl font-bold text-primary">Enterprise</span>
    </BrNavbarBrand>
    <BrNavbarContent class="hidden sm:flex gap-4">
      <BrNavbarItem href="#">Dashboard</BrNavbarItem>
      
      <BrDropdown>
        <BrDropdownTrigger as-child>
          <BrNavbarItem class="cursor-pointer">
            Solutions
            <ChevronDown class="w-4 h-4 ml-1 opacity-50" />
          </BrNavbarItem>
        </BrDropdownTrigger>
        <BrDropdownContent>
          <BrDropdownItem>Cloud Services</BrDropdownItem>
          <BrDropdownItem>Data Analytics</BrDropdownItem>
          <BrDropdownSeparator />
          <BrDropdownItem>Customer Cases</BrDropdownItem>
        </BrDropdownContent>
      </BrDropdown>
      
      <BrNavbarItem href="#" is-disabled>Docs (Maintenance)</BrNavbarItem>
    </BrNavbarContent>
  </BrNavbar>
</template>

移动端响应式

在小屏幕下自动隐藏导航内容，显示汉堡菜单，点击展开移动端专属菜单。

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrNavbarTrigger, 
  BrNavbarMenu, 
  BrNavbarSeparator, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-20">
    <BrNavbarBrand>
      <span class="font-bold">Mobile App</span>
    </BrNavbarBrand>
    
    <!-- Desktop visible -->
    <BrNavbarContent class="hidden sm:flex gap-6" justify="center">
      <BrNavbarItem href="#">Features</BrNavbarItem>
      <BrNavbarItem href="#">Pricing</BrNavbarItem>
    </BrNavbarContent>

    <!-- Mobile trigger -->
    <BrNavbarContent justify="end" class="sm:hidden">
      <BrNavbarTrigger />
    </BrNavbarContent>

    <!-- Mobile collapse menu -->
    <template #menu>
      <BrNavbarMenu>
        <BrNavbarItem href="#" class="w-full text-lg py-2">Features</BrNavbarItem>
        <BrNavbarSeparator />
        <BrNavbarItem href="#" class="w-full text-lg py-2">Pricing</BrNavbarItem>
        <BrButton class="w-full mt-4">Get Started</BrButton>
      </BrNavbarMenu>
    </template>
  </BrNavbar>
</template>

主题定制

BrNavbar 的样式深度集成了 TailwindCSS 与 BrConfigProvider。可以通过全局配置修改颜色，或者局部覆盖 Tailwind 类名。

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrConfigProvider 
} from '@breezeui/vue'
</script>

<template>
  <div class="space-y-8 relative z-0">
    <BrConfigProvider
      :theme="{
        background: '220 20% 98%', 
        primary: '150 60% 50%',    
        border: '220 15% 90%'      
      }"
    >
      <BrNavbar is-bordered class="rounded-t-lg">
        <BrNavbarBrand>Global Theme</BrNavbarBrand>
        <BrNavbarContent>
          <BrNavbarItem is-active>Home</BrNavbarItem>
          <BrNavbarItem>About</BrNavbarItem>
        </BrNavbarContent>
      </BrNavbar>
    </BrConfigProvider>

    <BrNavbar class="!bg-zinc-950 !text-white border border-zinc-800 rounded-lg">
      <BrNavbarBrand>Dark Nav</BrNavbarBrand>
      <BrNavbarContent class="gap-4">
        <BrNavbarItem is-active class="text-white after:bg-white">
          Home
        </BrNavbarItem>
        <BrNavbarItem class="text-zinc-400 hover:text-white">
          Projects
        </BrNavbarItem>
      </BrNavbarContent>
    </BrNavbar>
  </div>
</template>

API

BrNavbar Props

属性	类型	默认值	说明
position	`'static' \| 'sticky' \| 'fixed'`	`'sticky'`	导航栏定位方式
isBordered	`boolean`	`false`	是否显示底部边框
shouldHideOnScroll	`boolean`	`false`	向下滚动时是否自动隐藏
isTransparent	`boolean`	`false`	初始状态是否透明，滚动后显示背景
scrollTrigger	`number`	`20`	触发滚动样式的滚动距离 (px)
class	`string`	`-`	自定义样式类

BrNavbarBrand Props

属性	类型	默认值	说明
class	`string`	`-`	自定义样式类

BrNavbarContent Props

属性	类型	默认值	说明
justify	`'start' \| 'center' \| 'end'`	`'start'`	内容对齐方式
class	`string`	`-`	自定义样式类

BrNavbarItem Props

属性	类型	默认值	说明
isActive	`boolean`	`false`	是否处于激活状态
isDisabled	`boolean`	`false`	是否禁用
href	`string`	`-`	链接地址（如果存在则渲染为 `a` 标签）
class	`string`	`-`	自定义样式类

BrNavbarTrigger Props

属性	类型	默认值	说明
ariaLabel	`string`	`'Toggle navigation menu'`	辅助功能标签

#Navbar 导航栏

#组件特性

#基础用法

#带下拉菜单

#移动端响应式

#主题定制

#API

#BrNavbar Props

#BrNavbarBrand Props

#BrNavbarContent Props

#BrNavbarItem Props

#BrNavbarTrigger Props