Breadcrumb Component

The Breadcrumb component in the Arts Oven UI Component Library is designed to provide a navigational aid that helps users understand their current location within a website’s hierarchy. Breadcrumbs enhance usability by allowing users to navigate back to previous levels easily.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol className="breadcrumb">
        <li className="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li className="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li className="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

Key Elements

<nav> Element: Wraps the breadcrumb for semantic navigation and accessibility.
<ol> Element: Represents an ordered list of breadcrumb items.
<li> Elements: Each list item represents a step in the breadcrumb trail.
Active Item: The last item in the breadcrumb trail should have the aria-current="page" attribute to indicate it is the current page.

Arrow Divided

<nav aria-label="breadcrumb">
    <ol class="breadcrumb divide-arrow">
        <li class="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol className="breadcrumb divide-arrow">
        <li className="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li className="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li className="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

Arrow Dot

<nav aria-label="breadcrumb">
    <ol class="breadcrumb divide-dot">
        <li class="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol className="breadcrumb divide-dot">
        <li className="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li className="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li className="breadcrumb-item active" aria-current="page">
            <a href="#">Data</a>
        </li>
    </ol>
</nav>

Accessibility Considerations

When implementing breadcrumbs, ensure they are accessible:

Use aria-label on the <nav> element to describe its purpose.
Mark the current page with aria-current="page" on the last breadcrumb item.

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.