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

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>

Accessibility

  • The last breadcrumb hyperlink is styled to prevent mouse clicks (doesn't prevent keyboard activation).