Navigation

Breadcrumb

An accessible navigation trail that is framework-agnostic, so you pass the items directly.

<script>
  import { Breadcrumb } from "@codeatlasdev/ui";
</script>

<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Components" }]} />

Rendered as a nav landmark with an ordered list. The last item is the current page and is not a link.

Levels

Two, three and five levels, and a single root item.

Code

<script lang="ts">
  import { Breadcrumb } from '@codeatlasdev/ui';
</script>

<div class="stack">
  <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Components' }]} />
  <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Navigation', href: '/docs/navigation/' }, { label: 'Breadcrumb' }]} />
  <Breadcrumb
    items={[
      { label: 'Home', href: '/' },
      { label: 'Settings', href: '/settings' },
      { label: 'Account', href: '/settings/account' },
      { label: 'Security', href: '/settings/account/security' },
      { label: 'Two-Factor Auth' },
    ]}
  />
  <Breadcrumb items={[{ label: 'Home' }]} />
</div>

<style>
  .stack { display: grid; gap: 18px; }
</style>

Custom separator

Using › instead of /.

Code

<script lang="ts">
  import { Breadcrumb } from '@codeatlasdev/ui';
</script>

<Breadcrumb
  items={[{ label: 'Docs', href: '/' }, { label: 'API Reference', href: '/api' }, { label: 'Components' }]}
  separator="›"
/>

Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	–	Array of { label, href? }. The last item is always rendered as the current page, without a link.
`separator`	`string`	`'/'`	Character rendered between crumbs.
`class`	`string`	`''`	Extra CSS classes.