Menubar
An application menu bar. What makes it a menu bar rather than a row of dropdowns: once one menu is open, moving along the bar opens the next instead of merely focusing it.
src/components/ui/menubar.tsxAbout
From the component's own source, where it was written.
An application menu bar — File, Edit, View.
The behaviour that makes it a menu bar rather than a row of dropdowns: once one menu is open, moving along the bar opens the next one instead of merely focusing it. That is what everyone expects from a desktop menu, and a row of independent dropdowns feels broken by comparison.
Arrow keys move between menus; the bar is one tab stop. Left and Right belong to the bar, Up and Down to the open menu.
Install
npx astralyx-ui add menubar
Usage
import { Menubar } from '@/components/ui/menubar'
<Menubar menus={menus} />Composer
Change the props and the source below follows.
<Menubar menus={menus} />Examples
Application menus
<Menubar menus={menus} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Menubar
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| menus | MenubarMenu[] | required | { id, label, items } where an item is { id, label, shortcut?, disabled?, separatorBefore?, onSelect? }. |
Types
MenubarItem
An application menu bar — File, Edit, View.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| shortcut? | string | — |
| disabled? | boolean | — |
| separatorBefore? | boolean | — |
| onSelect? | () => void | — |
MenubarMenu
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | string | — |
| items | MenubarItem[] | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| keyboard | ← → Home End | Left and Right belong to the bar, Up and Down to the open menu. The bar is one tab stop. |
| hover | switches menus | Only while a menu is already open — hovering a closed bar does nothing. |