id: menubar
label: Menubar
family: family-b-selection
category: Navigation
intent: Horizontal application menu bar
description: Menu bar navigation
composable: true
capabilities: OpenClose
required_parts: ["MenubarMenu", "MenubarTrigger"]
optional_parts: ["MenubarContent", "MenubarItem", "MenubarSeparator"]
tags: ["menubar", "navigation", "desktop", "app"]
keywords:
pain: Horizontal menus break ARIA roles and keyboard navigation
promise: Menubar semantics and structure enforced via primitives
why: |
MenubarPrimitive enforces role="menubar" and structured menu composition. Trigger and content follow strict ARIA relationships. This guarantees accessible and predictable navigation behavior.
rules: ["CR-001", "CR-004"]
use_cases: ["desktop apps", "top navigation"]
related: ["dropdown_menu", "context_menu", "menu", "command"]
file: menubar_ui.css
tokens: menubar-*, space-*, radius-*, shadow-*, font-*
foundation: spacing, radius, shadow, typography
states: ["active"]
island: menubar_boundary.rs
pillar: menu
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<div class="menubar">
<button>"File"</button>
</div>
}
after: |
// ✅ CanonRS
view! {
<Menubar>
<MenubarMenu>
<MenubarTrigger>"File"</MenubarTrigger>
</MenubarMenu>
</Menubar>
}
boundary_type: interaction
ix_group: ix_nav
block: []
blocks_primitives: [flex]