Skip to content
omaris

Navigation

Breadcrumb

Breadcrumbs.

import { Breadcrumb } from 'omaris'
Learn

Examples

Basic

The last item is the current page, so it is not a link. For a page three or more levels deep — an order inside a customer inside a region.

<script lang="ts">	import { Breadcrumb } from 'omaris';</script>​<Breadcrumb	items={[		{ label: 'Home', href: '/docs' },		{ label: 'Components', href: '/docs/components/breadcrumb' },		{ label: 'Breadcrumb' }	]}/>

Collapsing

A long trail collapses in the middle rather than wrapping. Press the "…" to expand it in place; maxItems={0} never collapses.

<script lang="ts">	import { Breadcrumb } from 'omaris';​	const TRAIL = [		{ label: 'Home', href: '#' },		{ label: 'Workspace', href: '#' },		{ label: 'Projects', href: '#' },		{ label: 'Storefront', href: '#' },		{ label: 'Settings', href: '#' },		{ label: 'Domains' }	];</script>​<div class="flex w-full flex-col gap-4">	<Breadcrumb items={TRAIL} />	<Breadcrumb items={TRAIL} maxItems={0} size="sm" /></div>

When to use it

Use it for

  • Where a page sits in a hierarchy three or more levels deep: region, customer, order. Give every crumb but the last an href.
  • Client-side routing with no URL to give. A crumb with onclick and no href renders as a button.
  • A trail that gets long. Past maxItems it collapses in the middle, and the "…" expands in place instead of navigating.

Not for

Do

  • Mirror the URL: one crumb per segment a person could land on, in the order they nest.
  • Use the entity's name as the label: "Acme Ltd", not "Customer: Acme Ltd". The position implies the level.
  • Put it above the page title in the content column, not in the app bar.
  • Raise itemsAfterCollapse when the deep levels matter most, which in a dashboard they usually do.

Don't

  • Link the last crumb to itself. It is marked current and rendered as text.
  • Make it the only way off a phone screen. It is small and wraps badly, so give the phone a back arrow too.
  • Truncate labels with a class. Let the trail collapse in the middle; the ends carry the meaning.
Pairs with Top App Bar Navigation Drawer App Shell Text

Quick reference

size
  • sm
  • md (default)

API

Breadcrumb

Breadcrumbs.

Long trails collapse in the middle rather than wrapping or truncating the labels — the first and last few crumbs are the ones that carry meaning, and the "…" expands the rest in place.

import { Breadcrumb } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
list
No description in the source yet.
item
No description in the source yet.
link
No description in the source yet.
current
No description in the source yet.
separator
No description in the source yet.
expand
The button that expands a collapsed middle.

Props

items required
BreadcrumbItem[]
size

Defaults to 'md'

BreadcrumbSize
sm
md
maxItems

Defaults to 5

number

Collapse the middle once the trail is longer than this. 0 never collapses.

itemsBeforeCollapse

Defaults to 1

number

Crumbs kept at the start of a collapsed trail.

itemsAfterCollapse

Defaults to 2

number

Crumbs kept at the end of a collapsed trail.

label

Defaults to 'Breadcrumb'

string

Accessible name.

class
string
classes
BreadcrumbClasses

Per-part Tailwind overrides. class still covers the root.

separator
Snippet

Custom separator, in place of the chevron.