Breadcrumb
Breadcrumbs.
Walkthrough
1. 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' } ]}/>2. 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>