Menu 菜单

Menu 用于垂直或水平展示导航链接。它同时支持组合静态结构，以及 `items / selectedKeys / openKeys / group / divider / extra` 等数据驱动 API。

# 推荐：items 数据驱动导航

适合后台导航、设置菜单、侧边栏这类需要受控选中态和展开态的场景。

# 推荐：多选、分组与分割线

沿着常见菜单组件的 `multiple + group + divider` 思路，适合消息筛选、标签面板一类场景。

# 推荐：组合式语义 API

如果你更喜欢手写 JSX 结构，可以直接使用 `Menu.SubMenu / Menu.ItemGroup / Menu.Divider`。

下面的示例全部使用 Rue 当前静态/基础结构写法，用于展示 daisyUI 风格能力与覆盖范围。

# 导航跳转

# Menu 通过数据渲染（数组）

# Menu 通过数据渲染（数组，组件内部）

# Menu

# 响应式：小屏垂直，大屏水平

# 仅图标

# 仅图标（水平）

# 仅图标（带 tooltip）

# 仅图标（水平，tooltip）

# Menu 尺寸

# 禁用项目

# 带图标

# 带图标与徽章（响应式）

# 去除内边距和圆角

# 带标题

# 标题作为父级

# 子菜单

# 可折叠子菜单

# 通过类名控制展开（JS）

# 文件树

# 激活项

# 水平菜单

# 水平子菜单

# Mega 菜单（响应式）

# 可折叠（响应式）

API

`Menu.Item` 内置了常用链接能力，导航跳转示例里出现的 `to`、`href`、`target` 等属性可直接用于菜单项。

Menu.Item 链接相关

属性	说明	类型	默认值
`as`	指定交互节点类型；传入 to / href 时通常保持默认 a，纯动作项可改成 button 或 span。	`'a' \| 'button' \| 'span'`	`'a'`
`href`	外链或普通锚点地址；存在 href 且未传 to 时渲染原生 a 标签。	`string`	`-`
`to`	Rue Router 路由地址；传入后渲染 RouterLink，适合站内导航菜单。	`string`	`-`
`target / rel`	外链透传属性；target="_blank" 且未传 rel 时，会自动补上安全的 rel。	`string`	`-`
`title`	透传到交互节点的 title，适合长文案或补充说明。	`string`	`-`
`disabled`	禁用点击与导航；会移除 href / to 的实际跳转并输出 aria-disabled。	`boolean`	`false`
`onClick`	点击回调；可与 href / to 共用，也可配合 preventDefault 自定义拦截逻辑。	`(event: MouseEvent) => void`	`-`
`icon / extra`	菜单项前置图标与右侧补充内容，适合链接导航里展示状态、快捷键或徽标。	`any`	`-`