Breadcrumbs

Where the page sits, as a trail of links.

breadcrumbs.example.svelte

<script lang="ts">
  import { Breadcrumbs } from '@onlywin/ui-svelte';
</script>

<Breadcrumbs
  items={[
    { href: '#office', label: 'Office' },
    { href: '#games', label: 'Games' },
    { label: 'Fish on!' },
  ]}
/>

Usage

Do

Use it on pages two or more levels deep.

Don’t

Do not repeat the page title elsewhere in the trail.

Accessibility

A nav landmark with an ordered list; the current page is aria-current="page".

Keyboard

Breadcrumbs keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Breadcrumbs props
Prop	Type	Default	Description
`items` *required	`ReadonlyArray<IUiBreadcrumb>`	—
`label`	`string`	—