Menubar
A horizontal menu bar with dropdown menus for desktop-style application interfaces, featuring keyboard navigation, checkbox items, shortcut hints, and content alignment options.
Default
A basic menubar with multiple menus, each containing
MenubarItem actions, MenubarLabel section headers, MenubarSeparator dividers, and MenubarShortcut keyboard hints. Clicking a trigger opens its dropdown, and hovering over adjacent triggers switches between open menus automatically.Disabled Items
Set
Disabled="true" on MenubarItem or MenubarCheckboxItem to prevent interaction. Disabled items are visually muted with opacity-50 and pointer-events-none, and are skipped during keyboard navigation. This is useful for actions that are unavailable in the current application state.Checkbox Items
Toggle items for view options that maintain checked state using
MenubarCheckboxItem with @bind-Checked. Checkbox items use role="menuitemcheckbox" with aria-checked for screen reader support. Unlike regular items, checkbox items do not close the menu when clicked, allowing users to toggle multiple options.Keyboard Shortcuts
Display shortcuts in menus using
MenubarShortcut for simple text hints or Kbd for styled keyboard keys. These are purely visual hints; for functional shortcuts, use the KeyboardShortcutService. The MenubarShortcut component auto-aligns to the right side of the menu item with reduced opacity.Content Alignment
Use the
Align parameter on MenubarContent to control horizontal alignment of the dropdown relative to its trigger. Choose from Start (left-aligned), Center, or End (right-aligned). This is especially useful when the menubar is positioned near the edge of the viewport.Custom Variant
Use the
Class parameter on Menubar, MenubarTrigger, and MenubarContent to create custom themed menubars. Apply gradient borders, custom colors, or brand-specific styling to match your design system beyond the default theme.Application Menubar
A real-world composition pattern mimicking a desktop application with File, Edit, and View menus. This combines
MenubarItem for actions, MenubarCheckboxItem for toggleable settings, and MenubarShortcut for keyboard hints. The View menu toggles the sidebar and panels dynamically.Submenus and Radio Items
BbMenubarSub groups a trigger and a nested panel. Bind the radio group to keep one option selected. Arrow keys enter and leave the submenu; selecting a radio item closes the menu by default.