Breadcrumb Component

Axiom01's breadcrumb component provides a clear navigation path, indicating the user's current location within a hierarchical structure. It enhances usability by allowing users to quickly navigate back to previous pages.

Basic Breadcrumb

<nav class="breadcrumb" aria-label="Breadcrumb navigation">
<ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Subcategory</a></li>
    <li aria-current="page">Current Page</li>
</ol>
</nav>

Breadcrumb with Icons

You can easily include Font Awesome icons within your breadcrumb items for enhanced visual cues.

<nav class="breadcrumb icons" aria-label="Breadcrumb navigation">
<ol>
    <li><a href="#"><span aria-hidden="true"><i class="fas fa-home"></i></span> Home</a></li>
    <li><a href="#"><span aria-hidden="true"><i class="fas fa-folder"></i></span> Products</a></li>
    <li><a href="#"><span aria-hidden="true"><i class="fas fa-tag"></i></span> Electronics</a></li>
    <li aria-current="page"><span aria-hidden="true"><i class="fas fa-laptop"></i></span> Laptops</li>
</ol>
</nav>

Accessibility Considerations

The breadcrumb component uses semantic HTML (<nav>, <ol>, <li>, <a>) and ARIA attributes (aria-label="Breadcrumb navigation", aria-current="page") to ensure it is fully accessible to screen reader users. The last item in the breadcrumb typically represents the current page and should not be a link.