#401
Submenus
An item menu with Rename, a Color submenu, a Move to submenu and a destructive Delete, reporting the last action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Submenus" pattern (@codeatlasdev/ui demo #401, navigation/menu) in my app.
Call get_demo({ ids: ["#401"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Menus where a secondary list (colors, destination groups) would make the main menu long: the list opens beside the item.
Keep these library parts, with the props and tokens the demo uses:
- DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>Item actions</Button>`
- `<DropdownMenuItem onclick={() => (last = 'Rename')}>Rename</DropdownMenuItem>`, then two `<DropdownMenuSub>` blocks
- Each sub has `{#snippet trigger()}<DropdownMenuSubTrigger>Color</DropdownMenuSubTrigger>{/snippet}` (Color, Move to) and its options as `DropdownMenuItem` children from `{#each colors as color}` and `{#each groups as group}`
- Colors are Red, Green, Blue; groups are Inbox, Archive, Projects
- `<DropdownMenuSeparator />` precedes the destructive Delete item
- `let last = $state('')` is set per item and shown as `Last action: {last}` with `aria-live="polite"`
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
- DropdownMenu
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - DropdownMenuSeparator
@codeatlasdev/ui - DropdownMenuSub
@codeatlasdev/ui - DropdownMenuSubTrigger
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>Item actions</Button>`
- `<DropdownMenuItem onclick={() => (last = 'Rename')}>Rename</DropdownMenuItem>`, then two `<DropdownMenuSub>` blocks
- Each sub has `{#snippet trigger()}<DropdownMenuSubTrigger>Color</DropdownMenuSubTrigger>{/snippet}` (Color, Move to) and its options as `DropdownMenuItem` children from `{#each colors as color}` and `{#each groups as group}`
- Colors are Red, Green, Blue; groups are Inbox, Archive, Projects
- `<DropdownMenuSeparator />` precedes the destructive Delete item
- `let last = $state('')` is set per item and shown as `Last action: {last}` with `aria-live="polite"`
Related
Loading source.