Breadcrumb Component

The Breadcrumb component provides a navigational aid showing the user's current location within a hierarchy. It consists of a container and individual breadcrumb items that can have custom separators, tooltips, and indicate the current page.

Example Usage

<x-breadcrumb>
    <x-breadcrumb.item href="#" tooltip="Go to home">
        <x-slot:separator>
            <i class="icon-chevron-right"></i>
        </x-slot:separator>
        Home
    </x-breadcrumb.item>
    <x-breadcrumb.item href="#" separator=">">
        Library
    </x-breadcrumb.item>
    <x-breadcrumb.item href="#" :last="true">
        Data
    </x-breadcrumb.item>
</x-breadcrumb>

Components & Props

Breadcrumb (container)

• Accepts standard HTML attributes for the <nav> element.
• Wraps breadcrumb items inside an ordered list (<ol>).
• Adds accessible aria-label="breadcrumb".
• Styles for font size, weight, and color with dark mode support.

Breadcrumb.Item

• last (bool, default: false)
  Marks this item as the current page. When true, the item is styled bold and marked with aria-current="page".

• separator (string or HTML, default: > )
  Custom separator shown after the breadcrumb item (ignored for the last item). Can be a string or slot content.

• tooltip (string|null)
  Optional tooltip text shown on hover.

• Accepts additional HTML attributes like href for the link.

Overview

The Breadcrumb component helps users understand and navigate the hierarchy of pages. It supports accessible markup, customizable separators, tooltips, and highlights the current page. The separation into container and item components allows flexible composition and styling.