Navigation

Breadcrumb

Shows where the current page sits, with links back up the way.

Installation

npx sinaui add breadcrumb

Copy src/lib/ui/Breadcrumb.svelte, Icon.svelte and tokens.css. No other dependencies.

Examples

Basic

The last item is the current page, so it isn't a link.

<script lang="ts">
	import Breadcrumb from '#lib/ui/Breadcrumb.svelte';
</script>

<Breadcrumb
	items={[
		{ label: 'Library', href: '#basic' },
		{ label: 'Medicine', href: '#basic' },
		{ label: 'The Canon of Medicine' }
	]}
/>

Long trails

Past three levels, the middle folds into a “…” menu of links; the first level and the last two stay in view.

<script lang="ts">
	import Breadcrumb from '#lib/ui/Breadcrumb.svelte';
</script>

<!-- Two on one page need different names; a site normally has just one. -->
<Breadcrumb
	label="Breadcrumb, collapsed example"
	items={[
		{ label: 'Library', href: '#collapsed' },
		{ label: 'Sciences', href: '#collapsed' },
		{ label: 'Medicine', href: '#collapsed' },
		{ label: 'Ibn Sīnā', href: '#collapsed' },
		{ label: 'The Canon of Medicine', href: '#collapsed' },
		{ label: 'Book One: General Principles' }
	]}
/>

Long names

Each name stops at a readable width and ends in an ellipsis. Only names that are cut short show the full name in a tooltip, on hover or focus.

<script lang="ts">
	import Breadcrumb from '#lib/ui/Breadcrumb.svelte';
</script>

<!-- Two on one page need different names; a site normally has just one. -->
<Breadcrumb
	label="Breadcrumb, long names example"
	items={[
		{ label: 'Astronomy', href: '#long' },
		{ label: 'Al-Bīrūnī: collected works and letters', href: '#long' },
		{ label: 'The Mas‘ūdic Canon on Astronomy and the Stars' }
	]}
/>

Props

Prop	Type	Default
`items`	`{ label, href? }[]`
`max`	`number`	`3`
`label`	`string`	`'Breadcrumb'`

Accessibility

A <nav> landmark named “Breadcrumb” around an ordered list, so screen readers say how many levels deep the page is.
The “…” button says how many levels it hides, and opens a menu of real links (they open in a new tab too).
Cut-short names are shortened on screen only: screen readers always get the full name.
The current page carries aria-current="page"; the separators are hidden from screen readers.