菜单Menu

菜单：选中项驱动内容区

点菜单项或用方向键选中，右侧面板、标题与面包屑同步切换；展开「订单」看子分类，切窄屏看图标条，主操作只落在当前模块上。

从演示里提炼的知识点

每条都能在刚才的面板里被亲手验证；这里只命名与补边界。

• 选中项驱动内容区：选了哪个菜单项，内容区面板、标题与面包屑就切到对应模块；当前项是输入，内容区是输出。
• 当前项用 ink 标记：被选中的菜单项带 aria-current="page"，用 ink 竖条＋加粗文字标识，不靠 Rausch 或站点 accent 高亮。
• 父项可展开子菜单：父按钮用 aria-expanded 与 aria-controls 关联子列表；展开后子项缩进并用连接线表达层级。
• 键盘 roving tabindex：方向键上下移动焦点、左右进出子菜单，Enter/Space 选中，Home/End 跳首尾；只有一个项在 Tab 序列里。
• 窄屏折叠成图标条：标签收起、图标保留，当前项标记仍在；入口集合不丢，不是把菜单藏起来。
• 主操作落在当前模块：当前模块的主 CTA（如「新建发货单」）只作用于当前分类，结果落在列表行或徽章上，不是全局按钮。

什么时候用，什么时候不用

从你看到的结构信号判断，而不是把它当万能侧栏。

• 适合：应用或文档站有多个并列模块需要常驻切换，且每个模块各自有独立内容区与主操作（后台、工作台、设置中心）。
• 不适合平铺：只有 2–3 个互斥视图（用 tabs）；一级栏目超过约 7 个或带深层级（用 sidebar 或分组 mega-menu）；单页营销（一个主 CTA 就够）。
• 不适合当 tabs：菜单导航的是模块/路由，内容区会整体切换；如果只是同页内切换面板外观、URL 不变，那是 tabs 的工作。

怎么用：从入口到可验收

最短路径，每步都能在演示面板里对照。

1. 用 <nav><ul><li><button> 写入口，nav 给 aria-label；父项按钮加 aria-haspopup、aria-expanded、aria-controls。
2. 当前模块对应的按钮加 aria-current="page"，配 ink 竖条或底色与加粗，不只靠颜色。
3. 子菜单容器给被 aria-controls 引用的 id；展开时子项缩进并加连接线，收起时从视觉与 Tab 序列移除。
4. 键盘用 roving tabindex：方向键上下移动、左右进出子菜单、Enter/Space 选中、Home/End 跳首尾。
5. 窄屏把标签收成图标条但保留当前项标记；验收 Tab 能进每项、当前项可识别、内容区与标题同步、窄屏入口不丢。

正反例：在「订单 / 待发货」里新建一张发货单

同一目标，只改「选中项是否真的驱动内容区与主操作」这一处。