Components / Breadcrumbs

Breadcrumbs

# Introduction

Breadcrumbs are used to indicate the current page's location within a hierarchy. They are a secondary navigation aid that helps users understand where they are in relation to the rest of the site.

# Examples

Breadcrumbs are built with a <nav> element and an unordered list.

# Basic

Basic breadcrumbs are created by adding the zinq:breadcrumbs element and adding zinq:breadcrumbs.link elements inside it.

  
<zinq:breadcrumbs>
    <zinq:breadcrumbs.link href="#">Docs</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link href="#">Components</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link>Badge</zinq:breadcrumbs.link>
</zinq:breadcrumbs>

To ensure accessibility, the first item in the list should be a link to the homepage. That's why we have added a home attribute which will add a home icon to the breadcrumbs.

  
<zinq:breadcrumbs home="#">
    <zinq:breadcrumbs.link href="#">Docs</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link href="#">Components</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link>Badge</zinq:breadcrumbs.link>
</zinq:breadcrumbs>

You can also add a back link to the breadcrumbs by adding a back attribute.

  
<zinq:breadcrumbs back="#" home="#">
    <zinq:breadcrumbs.link href="#">Docs</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link href="#">Components</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link>Badge</zinq:breadcrumbs.link>
</zinq:breadcrumbs>

# Customizing

You can customize the breadcrumbs by adding classes or other attributes to the zinq:breadcrumbs element and zinq:breadcrumbs.link elements.

# Attributes

Breadcrumbs component will merge the classes you add with the default classes. Also, you can add any attribute to the breadcrumbs components.

  
<zinq:breadcrumbs class="ml-12">
    <zinq:breadcrumbs.link wire:navigate href="#">Docs</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link wire:navigate href="#">Components</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link>Badge</zinq:breadcrumbs.link>
</zinq:breadcrumbs>

# Divider

You can change the divider between the breadcrumbs by adding a divider attribute.

  
<zinq:breadcrumbs>
    <zinq:breadcrumbs.link divider="/" href="#">Docs</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link divider="/" href="#">Components</zinq:breadcrumbs.link>
    <zinq:breadcrumbs.link>Badge</zinq:breadcrumbs.link>
</zinq:breadcrumbs>