Breadcrumb

Create breadcrumbs to show users their location within a website.

Usage

The Breadcrumb component consists of links, which are aligned side by side and separated by a divider. Add the .uk-breadcrumb class to a <ul> element to define the component. Use <a> elements as breadcrumb items within the list. An active state is automatically applied to the last <li> element.

To add list items without a link, use a <span> element instead of an <a>. Alternatively, disable an <a> element by adding the .uk-disabled class to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.

<ul class="uk-breadcrumb">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>
  • <ul class="uk-breadcrumb">
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-disabled"><a>Disabled</a></li>
        <li><span>Active</span></li>
    </ul>