Element: #401 Submenus (navigation/menu) What it shows: An item menu with Rename, a Color submenu, a Move to submenu and a destructive Delete, reporting the last action. When to use: Menus where a secondary list (colors, destination groups) would make the main menu long: the list opens beside the item. Spec: - `` with `{#snippet triggerChild(props)}` rendering `Item actions` - ` (last = 'Rename')}>Rename`, then two `` blocks - Each sub has `{#snippet trigger()}Color{/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 - `` precedes the destructive Delete item - `let last = $state('')` is set per item and shown as `Last action: {last}` with `aria-live="polite"` Tags: dropdown-menu, menu, submenu, nested, actions, destructive Needs: @codeatlasdev/ui@4.4.0 Components: DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, Button Live demo: https://ui.codeatlas.com.br/docs/navigation/menu#submenus {#snippet triggerChild(props)} Item actions {/snippet} (last = 'Rename')}>Rename {#snippet trigger()}Color{/snippet} {#each colors as color} (last = `Color ${color}`)}>{color} {/each} {#snippet trigger()}Move to{/snippet} {#each groups as group} (last = `Moved to ${group}`)}>{group} {/each} (last = 'Delete')}>Delete {#if last}Last action: {last}{/if}