Tailwind CSS Breadcrumbs - React

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 and React project.

import { Breadcrumbs } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Breadcrumbs>
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}

Breadcrumbs with icon

You can add any type of icon for the Breadcrumbs component as easy as using icon in html.

import { Breadcrumbs } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Breadcrumbs>
      <a href="#" className="opacity-60">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-4 w-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
        </svg>
      </a>
      <a href="#" className="opacity-60">
        <span>Components</span>
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}

Block Level Breadcrumbs

A Breadcrumbs could be a block level component as well that get's all the available space in a row. You can render a Breadcrumbs as a block level element using the fullWidth prop.

import { Breadcrumbs } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Breadcrumbs fullWidth>
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}

Custom Breadcrumbs Separator

You can modify the Breadcrumbs separators by using the Separator prop.

import { Breadcrumbs } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Breadcrumbs separator="-">
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}

Props

Learn more about props definition and types of breadcrumbs component.

Theme

Learn how to customize the theme and styles for breadcrumbs component.

badge

button

Edit this page on Github