Breadcrumb Element

Keep the overview.

Overview

The Breadcrumb is used to help the user navigating on the website. It display the current site name and the "path way" from the homepage. The term is a reference to the bread crumbs used by Hansel and Gretel.

Usage Examples

  • Help the user to navigate through the page.
  • Identify the category or top page.
  • Fast way to the homepage.

Properties

  1. Links: Should the bread crumb navigation items link to the page(s). 
  2. Include Home: Include the homepage (/) in the bread crumb. 
Everything else can be configured with the general properties. 
Accordion Element Wireframe

See it in action

Interactions and Accessibility

Users can navigate through the pages by pressing Tab and open them by pressing Enter. 

Generated HTML


<nav class="mame-element mame-breadcrumb" arialabel="Breadcrumb">
   <ul>
      <li><a href="/">Home</a></li>
      <li aria-hidden="true"><span class="icon icon-angle-right" style="--ml:15px;"></span></li>
      <li>Current Page</li>
   </ul>
</nav>

Style / CSS Selectors


.mame-breadcrumb {
  /* All Breadcrumb Elements */
}

.mame-breadcrumb ul {
  /* All list items */
} 

.mame-breadcrumb ul li {
  /* A list item */
}

JavaScript

Breadcrumbs are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

References / Useful information

Was this article helpful?