Font and theme export

Breadcrumbs

Materialize is a modern responsive CSS framework based on Material Design by Google.

Breadcrumbs show the current location within a hierarchy of pages.

Basic

Earlier locations use a quieter color; the current page has stronger contrast and a medium font weight. Icons and separators align with the text in both light and dark themes. Use aria-current="page" to identify the current location, and give icon-only links an accessible label.

<nav class="breadcrumb-wrapper" aria-label="Breadcrumb">
  <a href="index.html" class="breadcrumb" aria-label="Home"><i class="material-icons" aria-hidden="true">home</i></a>
  <a href="#!" class="breadcrumb">Components</a>
  <span class="breadcrumb" aria-current="page">Breadcrumbs</span>
</nav>

Responsive breadcrumbs

On desktop, display the site title in the navbar and breadcrumbs below it. On tablet and mobile, replace the title with breadcrumbs using the existing visibility helpers. Resize the page to try this pattern, inspired by Better Breadcrumbs. No JavaScript is required.

<nav class="navbar" aria-label="Responsive navigation example">
  <div class="nav-wrapper primary on-primary-text">
    <a href="index.html" class="brand-logo hide-on-med-and-down">My workspace</a>
    <div class="breadcrumb-wrapper hide-on-large-only">
      <a href="index.html" class="breadcrumb" aria-label="Home"><i class="material-icons" aria-hidden="true">home</i></a>
      <a href="#!" class="breadcrumb">Projects</a>
      <span class="breadcrumb" aria-current="page">Project overview</span>
    </div>
  </div>
</nav>
<nav class="breadcrumb-wrapper hide-on-med-and-down" aria-label="Project breadcrumb">
  <a href="index.html" class="breadcrumb" aria-label="Home"><i class="material-icons" aria-hidden="true">home</i></a>
  <a href="#!" class="breadcrumb">Projects</a>
  <span class="breadcrumb" aria-current="page">Project overview</span>
</nav>

With Crazy Button

When the buttons exceed the available width, the breadcrumb bar scrolls horizontally and keeps them on one line. You can place several buttons inside a breadcrumb to group related actions.

Use Crazy Button links inside each breadcrumb. Medium tertiary FABs show each location as an icon. Labels provide accessible names and tooltips; the last link marks the current page.

<nav class="breadcrumb-wrapper" aria-label="Breadcrumb">
  <div>
    <span class="breadcrumb">
      <crazy-button type="fab" icon-text="home" label="Home" fab-color="tertiary" fab-size="normal" href="index.html"></crazy-button>
    </span>
    <span class="breadcrumb">
      <crazy-button type="fab" icon-text="widgets" label="Buttons" fab-color="tertiary" fab-size="normal" href="buttons.html"></crazy-button>
    </span>
    <span class="breadcrumb">
      <crazy-button type="fab" icon-text="add" label="Breadcrumbs" fab-color="tertiary" fab-size="normal" href="breadcrumbs.html" aria-current="page"></crazy-button>
    </span>
  </div>
</nav>

Load Materialize CSS and JavaScript to register crazy-button automatically. For icon label tooltips, also install tippy.js and load its styles, as shown on the Tooltips page. No additional initialization is needed.