bit Bheadless

Menubar

A desktop-style application menu bar — menus, submenus, checkable items and keyboard shortcuts — with zero visual opinion.

Implementation: CSS Tailwind

Application menubar

The WAI-ARIA menubar pattern: the bar is a single tab stop, ← / → move between menus (and switch the open one), ↓ / Enter / Space open a menu, ↑ / ↓, Home / End and typeahead move inside it, → / ← open and close submenus, and Escape closes. Once a menu is open, hovering another trigger switches to it. Checkbox (menuitemcheckbox) and radio (menuitemradio) items keep the menu open and show their state through BitBhMenuItemIndicator; BitBhMenuLabel names its BitBhMenuGroup. The shortcuts are just text.

Last action: (none) · Bookmarks bar: off · Profile: Benoit

Checkbox and radio items driving the UI

Checkable items are just bound state. @bind-Checked on BitBhMenuCheckboxItem and @bind-Value on BitBhMenuRadioGroup drive the editor below — toggle line numbers, word wrap and the status bar, change the zoom or the theme. The menu stays open while you toggle so you can see each change; set CloseOnSelect="true" on an item to close it instead.

1// Use the View and Theme menus to restyle this editor.
2public sealed class Greeter
3{
4 public string Greet(string name) => $"Hello, {name}! This line is long enough to show what Word Wrap does.";
5}
Ln 4, Col 18UTF-8100%Light

Nested submenus

Nest BitBhMenuSub (a BitBhMenuSubTrigger plus a BitBhMenuSubContent) to any depth. Hovering opens a submenu after OpenDelay, and a CloseDelay grace period lets the pointer travel diagonally into it. → / Enter / Space open a submenu and focus its first item, ← / Escape close it and return to the trigger; on an item without a submenu, → moves on to the next menu of the bar. Submenu triggers expose aria-haspopup, aria-expanded and data-state.

Last action: (none)

Disabled menus and items

A disabled BitBhMenu can't be opened and ← / → skip over it; disabled items stay visible (with data-disabled and aria-disabled) but arrow keys and typeahead pass them by. Loop="false" stops the arrow keys at the first and last menu instead of wrapping. Items can also render as links with As="a" — Enter follows the link.

Last action: (none)
An unhandled error has occurred. Reload 🗙