Breadcrumbs

Breadcrumbs are that small trail of links near the top of a page that tells people where they are and how they got there. They matter most once a site has more than a couple of levels to it. This component builds that trail for you and takes care of the details that are easy to forget.

Behind the scenes it wraps everything in a proper navigation region with a plain list inside, so a screen reader announces it as a real breadcrumb trail rather than just a row of unrelated text. To build a trail, list your items in order, starting from the top of your site and working down to the page someone is looking at right now, and add the current attribute to whichever one is that final page.

<x-bladewind::breadcrumbs aria-label="Breadcrumb">
    <x-bladewind::breadcrumbs.item href="/" icon="home">Home</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item href="/components">Components</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item current>Breadcrumbs</x-bladewind::breadcrumbs.item>
</x-bladewind::breadcrumbs>

Linked And Current Items

To make an item a clickable link, give it an href, otherwise it just shows up as plain text. You will usually want to leave the href out for the last item in your breadcrumbs trail. That said, there are times when the current page also needs to work as a link, for example if clicking it should refresh the page or take someone back to a default view of it. In that case, just add both href and current to the same item.

<x-bladewind::breadcrumbs aria-label="Customer path">
    <x-bladewind::breadcrumbs.item href="/">Home</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item href="/customers">Customers</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item href="/customers/42" current>Customer details</x-bladewind::breadcrumbs.item>
</x-bladewind::breadcrumbs>

Icons

You can put a small icon next to any item's text using icon, and control how it looks with icon-type and icon-dir. These three work exactly the way they do on the Icon component itself, so if you already know how to pick an icon and switch between outline and solid there, you already know how it works here too. Leave icon-dir empty and it pulls from the same built in icon set the rest of the library uses. Give it a folder name from inside your app's public directory instead, and it will load your own SVG file from there rather than the built in set.

<x-bladewind::breadcrumbs>
    <x-bladewind::breadcrumbs.item href="/" icon="home">Home</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item href="/settings" icon="cog-6-tooth">Settings</x-bladewind::breadcrumbs.item>
    <x-bladewind::breadcrumbs.item current icon="user-circle" icon-type="solid">Profile</x-bladewind::breadcrumbs.item>
</x-bladewind::breadcrumbs>

Separator Options

By default, each item is separated from the next by a chevron. If that is not the look you want, you can swap it by setting the separator attribute to any character of your choice. The component has slash and dot built in. Changing the separator only changes what sits between the items. You do not need to touch how the items themselves are written.

        
            <x-bladewind::breadcrumbs separator="slash">
                ...
            </x-bladewind::breadcrumbs>
        
    

        
            <x-bladewind::breadcrumbs separator=">>>">
                ...
            </x-bladewind::breadcrumbs>
        
    

Sizes

If the default size does not fit your layout, set size to one of the six available sizes, starting at the smallest,tiny, until the largest, large, with regular sitting in the middle as the default. Pick whichever one reads comfortably next to the rest of your page's text.

<x-bladewind::breadcrumbs size="medium">...</x-bladewind::breadcrumbs>

Long And Collapsed Trails

Some pages sit four or more levels deep, and spelling out every single step can make the trail wider than the screen, especially on a phone. So once a trail reaches four items or more, this component quietly hides the middle ones on narrow screens, keeping only the first item and the current page visible, with a small marker in between showing that something has been tucked away. Every hidden link is still sitting in the document though. If you would rather always show the full trail no matter how narrow the screen gets, set collapse="false" and this behaviour switches off entirely.

<x-bladewind::breadcrumbs collapse="false">...</x-bladewind::breadcrumbs>

Dark Mode And RTL

Colours automatically match whichever theme, light or dark, your page is currently using, so there is no need to style this component separately for dark mode. The same goes for right to left languages such as Arabic or Hebrew. The trail will follow whatever reading direction the surrounding page has already set. If you need one breadcrumb trail to run right to left on its own, separately from the rest of the page, you can also set dir="rtl" directly on that breadcrumb, and the little chevron separators will flip direction to match automatically.

<x-bladewind::breadcrumbs dir="rtl" aria-label="مسار الصفحة">...</x-bladewind::breadcrumbs>

Accessibility

• Give the trail a short, clear label with aria-label, something like "Breadcrumb" or a short description of the section it belongs to. A screen reader announces this label, so people know what kind of navigation they have just landed on. Leave it off and it defaults to plain "Breadcrumb".
• Always mark exactly one item, the page someone is currently looking at, with the current attribute. This tells assistive technology which step in the trail is the current one, the same way bold or coloured text tells a sighted person at a glance.
• Write labels that make sense entirely on their own. Someone using a screen reader might jump straight to this trail without having read the rest of the page first, so a label like "Details" is a lot less useful than something like "Order details".
• The small separators between items, and the marker that appears when items are hidden on a narrow screen, are both hidden from screen readers on purpose. They are purely visual, so there is no reason to make a screen reader announce a chevron or a dot between every single item.
• Every linked item is a genuine anchor tag, the same kind of link used everywhere else on the web. That means people can already tab to it and activate it with the keyboard, so this component does not need to write any custom keyboard handling of its own.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Breadcrumbs component.

Breadcrumbs Component

Breadcrumbs Item Component

Breadcrumbs with all attributes defined

<x-bladewind::breadcrumbs
    separator="slash"
    size="medium"
    collapse="false"
    aria-label="Order path"
    class="rounded-lg">
    ...
</x-bladewind::breadcrumbs>

Breadcrumbs Item with all attributes defined

<x-bladewind::breadcrumbs.item
    href="/settings"
    current="true"
    icon="cog-6-tooth"
    icon-type="solid"
    icon-dir="icons/custom"
    class="font-semibold">
    Settings
</x-bladewind::breadcrumbs.item>