Navbar
navbar导航栏 · 复合 Brand/Content/Item/MenuToggle + sticky + 移动端切换
用法
基础用法
NavbarBrand 放品牌，NavbarContent 排导航项，isActive 高亮当前页。
tsx
<Navbar bordered>
<NavbarBrand>瑚琏</NavbarBrand>
<NavbarContent justify="end">
<NavbarItem isActive>组件</NavbarItem>
<NavbarItem>文档</NavbarItem>
<NavbarItem>主题</NavbarItem>
</NavbarContent>
</Navbar>内容居中
NavbarContent 的 justify 控制导航项对齐方向。
tsx
<Navbar bordered>
<NavbarBrand>瑚琏</NavbarBrand>
<NavbarContent justify="center">
<NavbarItem isActive>组件</NavbarItem>
<NavbarItem>文档</NavbarItem>
<NavbarItem>主题</NavbarItem>
</NavbarContent>
</Navbar>响应式菜单
窄屏用 NavbarMenuToggle 受控展开折叠菜单（缩小窗口查看）。
tsx
function App() {
const [open, setOpen] = useState(false);
return (
<Navbar bordered>
<NavbarMenuToggle isOpen={open} onToggle={() => setOpen((v) => !v)} />
<NavbarBrand>瑚琏</NavbarBrand>
<NavbarContent justify="end" className="hidden sm:flex">
<NavbarItem isActive>组件</NavbarItem>
<NavbarItem>文档</NavbarItem>
</NavbarContent>
</Navbar>
);
}何时用
页面顶部全局导航条（品牌 + 主菜单 + 移动端汉堡切换）用。它是横向顶栏复合件——左侧纵向 Sider 树菜单用 NavMenu，带下拉面板的多级导航用 NavigationMenu，页脚备案行用 BeianFooter。
导入
ts
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle } from "@hulianui/ui"Props
各子件均继承对应原生元素属性。
Navbar（<nav>）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| sticky | boolean | — | 是否 sticky 吸顶 |
| bordered | boolean | — | 是否显示底部分隔边框 |
NavbarContent（<ul>）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| justify | "start" | "center" | "end" | — | 内容对齐方向 |
NavbarItem（<li>）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| isActive | boolean | — | 当前激活项（aria-current + 高亮） |
NavbarMenuToggle
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| isOpen | boolean | — | 受控展开态 |
| aria-label | string | 按 isOpen 切换 | 无障碍标签 |
| className | string | — | 类名 |
NavbarBrand 为纯容器，无专属 prop。
Events
NavbarMenuToggle
| 事件 | 类型 | 说明 |
|---|---|---|
| onToggle | () => void | 切换回调 |
Slots
Navbar / NavbarContent / NavbarItem / NavbarBrand 均接受 children。
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 各容器子件的子内容 |
禁忌 / 坑
NavbarMenuToggle是受控件，isOpen/onToggle由你自己维护 state，移动端展开菜单也需你按open自行条件渲染（组件不替你管面板开合）。- 暂无其他已知坑。
相关
BeianFooter · NavMenu · NavigationMenu · Menu · Menubar · Dock
Playground
<Navbar sticky bordered>
<NavbarMenuToggle isOpen={open} onToggle={toggle} />
<NavbarBrand>瑚琏</NavbarBrand>
<NavbarContent justify="end">
<NavbarItem isActive>组件</NavbarItem>
<NavbarItem>文档</NavbarItem>
</NavbarContent>
</Navbar>