Skip to main content

Breadcrumbs v0.1.0+ HelixUI v0.1.0 or later required

The last breadcrumb hyperlink is styled to prevent mouse clicks, but it will not prevent keyboard activation.

Breadcrumbs are simply hyperlinks separated by icon delimiters within a navigation.

Single Breadcrumb

Build breadcrumb navigation by adding the .hxBreadcrumb CSS class to a <nav> element that contains at least one hyperlink.

<nav class="hxBreadcrumb">
  <a href="#">Home</a>
</nav>

Multiple Breadcrumbs

Icon delimiters are added between each hyperlink using the angle-right icon with the .delimiter CSS class applied.

<nav class="hxBreadcrumb">
  <a href="#">Home</a>
  <hx-icon class="delimiter" type="angle-right"></hx-icon>
  <a href="#">Library</a>
  <hx-icon class="delimiter" type="angle-right"></hx-icon>
  <a href="#">Current</a>
</nav>