Navbar 导航栏

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

基础用法

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

BreezeUI

• Home
• Products
• About Us

Example

带下拉菜单

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

Enterprise

• Dashboard
• Solutions
• Docs (Maintenance)

Example

移动端响应式

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

Mobile App

• Features
• Pricing

Features

Pricing

Example

主题定制

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

Global Theme

• Home
• About

Dark Nav

• Home
• Projects

Example

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'	辅助功能标签