Skip to content
Praesepe UI

navigation

Breadcrumb

Accessible breadcrumb navigation with optional home icon, chevron separators, and aria-current on the final page.

Copied!

Examples

App path

Orders section breadcrumb for an SME back office.

Copied! 
<x-ui.breadcrumb>
    <x-ui.breadcrumb.item href="/docs">Penjualan</x-ui.breadcrumb.item>
    <x-ui.breadcrumb.item href="/docs/components">Pesanan</x-ui.breadcrumb.item>
    <x-ui.breadcrumb.item current>ORD-2201</x-ui.breadcrumb.item>
</x-ui.breadcrumb>

<nav aria-label="Breadcrumb" class="text-sm">
    <ol class="flex flex-wrap items-center gap-1.5 text-fg-muted">
        <li class="inline-flex items-center gap-1.5">
            <a href="/docs" class="hover:text-fg">Penjualan</a>
            <span aria-hidden="true">/</span>
        </li>
        <li class="inline-flex items-center gap-1.5">
            <a href="/docs/components" class="hover:text-fg">Pesanan</a>
            <span aria-hidden="true">/</span>
        </li>
        <li><span class="font-medium text-fg" aria-current="page">ORD-2201</span></li>
    </ol>
</nav>

With home icon

Leading home control before the trail.

Copied! 
<x-ui.breadcrumb home-href="/" home-label="Beranda">
    <x-ui.breadcrumb.item href="/docs">Inventori</x-ui.breadcrumb.item>
    <x-ui.breadcrumb.item current>Stok gudang</x-ui.breadcrumb.item>
</x-ui.breadcrumb>

<nav aria-label="Breadcrumb" class="text-sm">
    <ol class="flex flex-wrap items-center gap-1.5 text-fg-muted">
        <li class="inline-flex items-center gap-1.5">
            <a href="/" class="hover:text-fg"><span class="sr-only">Home</span>⌂</a>
            <span aria-hidden="true">/</span>
        </li>
        <li class="inline-flex items-center gap-1.5">
            <a href="/docs" class="hover:text-fg">Inventori</a>
            <span aria-hidden="true">/</span>
        </li>
        <li><span class="font-medium text-fg" aria-current="page">Stok gudang</span></li>
    </ol>
</nav>

Props API

Component props
Prop Type Default Description
homeHref string|null null Optional leading home link URL.
homeLabel string Home Accessible label for the home icon link.
item.href string|null null Link target. Omit or set current for the final crumb.
item.current bool false Marks the final item with aria-current="page".

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • Uses nav aria-label="Breadcrumb" wrapping an ordered list.
  • The current page sets aria-current="page" and is not a link.
  • Separators and the decorative home icon are aria-hidden. Home keeps a screen-reader-only text label.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

WhatsApp: TODO Email the studio Visit Praesepe