#153
Levels
Four stacked breadcrumbs with 2, 3, 5 and 1 levels, where the last item is the current page without a link.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Levels" pattern (@codeatlasdev/ui demo #153, navigation/breadcrumb) in my app.
Call get_demo({ ids: ["#153"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing where a page sits in the hierarchy, from a single root page to a deep settings path.
Keep these library parts, with the props and tokens the demo uses:
- Breadcrumb from "@codeatlasdev/ui"
Behaviour to keep:
- Four `Breadcrumb` components in a `<div class="stack">`, each with an `items` array of `label` and optional `href`
- Two levels: `{ label: 'Home', href: '/' }, { label: 'Components' }`
- Three levels end with `{ label: 'Breadcrumb' }` after `href: '/docs/navigation/'`
- Five levels run from Home to `{ label: 'Two-Factor Auth' }` via `href: '/settings/account/security'`
- Single level: `items={[{ label: 'Home' }]}` with no `href`
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
- Breadcrumb
@codeatlasdev/ui
How it is built
- Four `Breadcrumb` components in a `<div class="stack">`, each with an `items` array of `label` and optional `href`
- Two levels: `{ label: 'Home', href: '/' }, { label: 'Components' }`
- Three levels end with `{ label: 'Breadcrumb' }` after `href: '/docs/navigation/'`
- Five levels run from Home to `{ label: 'Two-Factor Auth' }` via `href: '/settings/account/security'`
- Single level: `items={[{ label: 'Home' }]}` with no `href`
Related
Loading source.