Tailwind CSS Breadcrumbs

Use our Tailwind CSS breadcrumbs component to simply create beautiful breadcrumbs for your pages with Material Tailwind.

Breadcrumbs are website links that allow users to track where they are on a website and how far they are from the homepage. They are highly important elements for your search engine optimisation (SEO) and user experience.

See below our versatile breadcrumbs component example that you can use in your Tailwind CSS project.


<nav aria-label="breadcrumb">
  <ol class="breadcrumbs">
    <li class="breadcrumb-item active text-dark-500" aria-current="page">
      <span>Home</span>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumbs">
    <li class="breadcrumb-item text-dark-500 opacity-50">
      <a href="#home"><span>Home</span></a>
    </li>
    <li class="breadcrumb-item active text-dark-500" aria-current="page">
      <span>Library</span>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumbs">
    <li class="breadcrumb-item opacity-50">
      <a href="#home"><span>Home</span></a>
    </li>
    <li class="breadcrumb-item opacity-50">
      <a href="#library"><span>Library</span></a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <span>Data</span>
    </li>
  </ol>
</nav>
Edit this page on Github