#239
Leading icons and brand logos
A dropdown menu of agents where brand-colored icons opt out of the item's text color, including a scheme-aware monochrome mark.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Leading icons and brand logos" pattern (@codeatlasdev/ui demo #239, navigation/menu) in my app.
Call get_demo({ ids: ["#239"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Pickers that list third-party products or agents with their real logos, such as a new-tab or integration menu.
Keep these library parts, with the props and tokens the demo uses:
- DropdownMenu, DropdownMenuItem, DropdownMenuLabel, SchemeAsset, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>New tab</Button>`
- `<DropdownMenuLabel>Agents</DropdownMenuLabel>` followed by 4 items: Shell, Claude Code, Codex, Coming soon
- Shell uses `{#snippet icon()}<Bot />{/snippet}`; Claude Code and Codex set `brandIcon` so the inline `svg` keeps its own colors
- Codex wraps `<SchemeAsset>` with `{#snippet light()}` and `{#snippet dark()}` svg variants
- Last item is `brandIcon disabled`
- Each item sets `last` through `onclick`, shown as `Opened: {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 - DropdownMenuLabel
@codeatlasdev/ui - SchemeAsset
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>New tab</Button>`
- `<DropdownMenuLabel>Agents</DropdownMenuLabel>` followed by 4 items: Shell, Claude Code, Codex, Coming soon
- Shell uses `{#snippet icon()}<Bot />{/snippet}`; Claude Code and Codex set `brandIcon` so the inline `svg` keeps its own colors
- Codex wraps `<SchemeAsset>` with `{#snippet light()}` and `{#snippet dark()}` svg variants
- Last item is `brandIcon disabled`
- Each item sets `last` through `onclick`, shown as `Opened: {last}` with `aria-live="polite"`
Related
Loading source.