#944
Editor menu bar
An application menu bar with File, Edit, View and a disabled Help menu; File has a submenu, View has a checkbox and a radio group, and a line below reports the last action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Editor menu bar" pattern (@codeatlasdev/ui demo #944, navigation/menubar) in my app.
Call get_demo({ ids: ["#944"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A desktop-style application or editor menu bar: arrows move between menus, an open menu switches on hover or ArrowRight and ArrowLeft.
Keep these library parts, with the props and tokens the demo uses:
- announce, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, Menubar, MenubarMenu from "@codeatlasdev/ui"
Behaviour to keep:
- `<Menubar aria-label="Editor">` holds four `MenubarMenu`s labelled File, Edit, View and a `disabled` Help
- File has `DropdownMenuItem`s, a `DropdownMenuSub` with `DropdownMenuSubTrigger` for Export, a separator and a destructive Close
- View has `<DropdownMenuCheckboxItem bind:checked={wrap}>` and a `<DropdownMenuRadioGroup bind:value={zoom} aria-label="Zoom">` with 100% and 150%
- Action items call `function pick(action: string)`, which sets `last` and calls `announce`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- DropdownMenuCheckboxItem
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - DropdownMenuLabel
@codeatlasdev/ui - DropdownMenuRadioGroup
@codeatlasdev/ui - DropdownMenuRadioItem
@codeatlasdev/ui - DropdownMenuSeparator
@codeatlasdev/ui - DropdownMenuSub
@codeatlasdev/ui - DropdownMenuSubTrigger
@codeatlasdev/ui - Menubar
@codeatlasdev/ui - MenubarMenu
@codeatlasdev/ui
How it is built
- `<Menubar aria-label="Editor">` holds four `MenubarMenu`s labelled File, Edit, View and a `disabled` Help
- File has `DropdownMenuItem`s, a `DropdownMenuSub` with `DropdownMenuSubTrigger` for Export, a separator and a destructive Close
- View has `<DropdownMenuCheckboxItem bind:checked={wrap}>` and a `<DropdownMenuRadioGroup bind:value={zoom} aria-label="Zoom">` with 100% and 150%
- Action items call `function pick(action: string)`, which sets `last` and calls `announce`
Related
Loading source.