Navbar 导航栏

Navbar 仍然保持 Rue 当前的视觉基础和 daisyUI 的布局骨架，但提供了更适合真实项目的语义插槽、数据驱动项和布局控制能力。

何时使用

需要一个轻量的头部布局容器，用来放品牌、导航入口、搜索框和用户操作。
希望使用 Rue 当前的视觉风格，但把常见头部结构改成更好复用的 API。
既要支持快速搭建推荐用法，也要支持基础的 children + Start/Center/End 手写布局。

# 推荐用法：语义插槽

用 brand、center、actions 描述最常见的头部结构；布局细节交给 startProps 和 endProps。

# 数据驱动导航项

当中间菜单和右侧状态来自配置或接口时，用 items 比手写结构更容易维护。

# 根节点与布局控制

支持 header 根节点、换行和区块对齐，适合内容更密集的工作台头部。

组合示例

下面这几组示例保持了基础写法，只做了页面重组，方便继续对照 Start / Center / End 的组合组合方式。

# 仅标题

最简单的 navbar，用 root 直接承载内容。

# 标题与图标

展示组合的 Start + End 组合。

# 三段式布局

中间标题 + 两侧图标，是最标准的三栏头部。

# 菜单与子菜单

展示菜单容器和 details 子菜单的组合演示。

# 搜索框与头像下拉

展示搜索、头像和下拉菜单混排的组合结构。

Navbar 现在同时支持推荐的语义插槽模式，以及组合模式。

Navbar

属性	说明	类型	默认值
`as`	指定根节点标签，例如 div、header、nav	`any`	`'div'`
`brand`	推荐模式下的品牌区内容，会落在 start 区前面	`any`	`-`
`start / center / end`	推荐模式下的三个语义插槽	`any`	`-`
`actions`	推荐模式下的操作区内容，会落在 end 区最后	`any`	`-`
`items`	数据驱动写法；通过 placement 分发到 start、center、end	`NavbarItem[]`	`-`
`startProps / centerProps / endProps`	推荐模式下传给三个布局区的属性	`Omit<NavbarSectionProps, "children" \| "placement">`	`-`
`wrap`	允许根节点换行，适合搜索框或操作区较多的场景	`boolean`	`false`
`sticky`	为根节点追加 sticky 头部定位类	`boolean`	`false`
`bordered`	为根节点追加底边框	`boolean`	`false`
`children`	组合组合模式；传入后优先按 children 渲染	`any`	`-`

Navbar.Start / Navbar.Center / Navbar.End / Navbar.Section

属性	说明	类型	默认值
`as`	指定布局区标签	`any`	`'div'`
`align`	控制区块内部对齐	`'start' \| 'center' \| 'end' \| 'between'`	`根据 placement 自动推导`
`grow`	让布局区占据更多可用宽度	`boolean`	`false`
`wrap`	允许区块内部换行	`boolean`	`false`
`className`	追加到 navbar-start / center / end 的类名	`string`	`-`

Navbar.Item / items[]

属性	说明	类型	默认值
`placement`	仅 items 数组使用，控制内容落在哪个区域	`'start' \| 'center' \| 'end'`	`'start'`
`as`	指定数据项或 Navbar.Item 的标签	`any`	`'div'`
`content`	数据驱动模式下的内容；等价于 children	`any`	`-`
`grow`	让单个项目在所在区块内扩展	`boolean`	`false`
`className`	追加到内层 inline-flex 包裹节点的类名	`string`	`-`

双模式说明

children + Navbar.Start/Center/End: 适合完全手写布局，支持基础示例。

brand / start / center / end / actions / items: 适合抽象成复用头部或通过配置生成导航结构。

FAQ

什么时候选推荐模式，什么时候继续手写 children？

如果页面头部结构在多个页面之间重复，或者导航项来自配置，优先用语义插槽和 items。如果当前头部结构非常自由，包含复杂的 dropdown、menu、搜索表单，继续手写children + Navbar.Start/Center/End会更直接。

children 和 items 同时传时谁优先？

当前组件会优先渲染children。这样可以保证项目代码接入时不被新属性打断，也能让组合模式保持完全可控。

sticky 和 bordered 是强样式能力吗？

不是。它们只是补一层常用布局类，仍然遵循 Rue 当前的视觉基底；更细的背景、阴影、圆角和响应式布局，依然建议通过className 和区块 props 来组合。