Menubar

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.

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.

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.

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.

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.

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.

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.