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>
  );
}

Props

The following props are available for the breadcrumbs component. These are the custom props that come with we've added for the breadcrumbs component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
separatornodeChange breadcrumbs separator between it's elements/
fullWidthbooleanChange breadcrumbs to a block level elementfalse
classNamestringAdd custom className for breadcrumbs''
childrennodeAdd content for breadcrumbsNo default value its a required prop.