Breadcrumb

11 · Menu

A breadcrumb that shows where the page sits in the application. A root link with a home icon is added at the start automatically; the last item is rendered as plain text as the current page.

acun:breadcrumb

Basic usage

Pass the items in the items array in order, from the root to the page. You do not need to add the root. The last item is rendered as plain text even if it has a link, and gets aria-current="page".

LIVE EXAMPLE

<acun:breadcrumb home-url="#" :items="[
    ['label' => 'Customers', 'url' => '#'],
    ['label' => 'Customer List', 'url' => '#'],
    ['label' => 'Edit'],
]" />

Prop	Values
`items`	[['label' => …, 'url' => …], …]

With a route name

Instead of a URL, you can pass a route name with the route key; the link is generated with route(). Links open with wire:navigate.

BLADE

<acun:breadcrumb :items="[
    ['label' => 'Customers', 'route' => 'customers.index'],
    ['label' => $customer->name],
]" />

Prop	Values
`items[].route`	Route name
`items[].url`	Direct URL; takes precedence over route

Root link and item without a link

By default the root goes to the dashboard route, or to the site root if that route does not exist; pass another route with home-route or a direct URL with home-url. home-label is the screen reader name and tooltip of the icon. An intermediate item without a URL (here "Reports") is rendered as plain text.

LIVE EXAMPLE

<acun:breadcrumb home-url="#" home-label="Dashboard home" :items="[
    ['label' => 'Reports'],
    ['label' => 'Sales report'],
]" />

Prop	Values
`home-route`	Route name of the root; default dashboard
`home-url`	Direct URL of the root; takes precedence over home-route
`home-label`	Accessible name of the root; default "Home"

Composable usage

Instead of passing items, you can write the items with acun:breadcrumb.item: an item with href is a link, and an item without it (or with current) is the current page and gets aria-current="page". Items can carry rich content (icons, badges); the separator is replaced with acun:breadcrumb.separator (then pass :separator="false" to the next item). The home link is still added automatically.

LIVE EXAMPLE

<div class="space-y-4">
    <acun:breadcrumb home-url="#">
        <acun:breadcrumb.item href="#">Stores</acun:breadcrumb.item>
        <acun:breadcrumb.item href="#">Kadıköy branch</acun:breadcrumb.item>
        <acun:breadcrumb.item>Orders</acun:breadcrumb.item>
    </acun:breadcrumb>

    <acun:breadcrumb home-url="#">
        <acun:breadcrumb.item href="#" class="flex items-center gap-1"><acun:icon name="building-storefront" size="4" /> Stores</acun:breadcrumb.item>
        <acun:breadcrumb.separator>/</acun:breadcrumb.separator>
        <acun:breadcrumb.item :separator="false">Kadıköy branch <acun:badge variant="warning">3 orders waiting</acun:badge></acun:breadcrumb.item>
    </acun:breadcrumb>
</div>

Prop	Values
`acun:breadcrumb.item`	href, current, separator
`acun:breadcrumb.separator`	slot: separator (default: arrow)

API

Props and slots

The values the component accepts.

Prop	Default	Description
`items`	`[]`	['label' => …, 'url' => … \| 'route' => …]; the last item and items without a URL are plain text
`home-route`	`dashboard`	Route name of the root link; the site root if the route does not exist
`home-url`	`null`	Direct URL of the root link
`home-label`	`null`	Accessible name of the root; defaults to "Home"
`breadcrumb.item: href · current · separator`	`null · when no href · true`	Link, current page (aria-current) and the separator before it
`breadcrumb.separator`	—	Custom separator; an arrow when the slot is empty