| title | description | navigation | github | prev | next | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Breadcrumbs for React - Material Tailwind |
Customise your web projects with our easy-to-use breadcrumbs component for Tailwind CSS and React using Material Design guidelines. |
|
breadcrumbs |
badge |
button |
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.
<CodePreview link="breadcrumbs#breadcrumbs" component={<BreadcrumbsExamples.BreadcrumbsDefault />}>
import { Breadcrumbs } from "@material-tailwind/react";
export function BreadcrumbsDefault() {
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.
<CodePreview link="breadcrumbs#breadcrumbs-with-icon" component={<BreadcrumbsExamples.BreadcrumbsWithIcon />}>
import { Breadcrumbs } from "@material-tailwind/react";
export function BreadcrumbsWithIcon() {
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.
<CodePreview link="breadcrumbs#block-level-breadcrumbs" component={<BreadcrumbsExamples.BlockLevelBreadcrumbs />}>
import { Breadcrumbs } from "@material-tailwind/react";
export function BlockLevelBreadcrumbs() {
return (
<Breadcrumbs fullWidth>
<a href="#" className="opacity-60">
Docs
</a>
<a href="#" className="opacity-60">
Components
</a>
<a href="#">Breadcrumbs</a>
</Breadcrumbs>
);
}## Breadcrumbs Custom Separator
You can modify the Breadcrumbs separators by using the Separator prop.
<CodePreview link="breadcrumbs#breadcrumbs-custom-separator" component={<BreadcrumbsExamples.BreadcrumbsCustomSeparator />}>
import { Breadcrumbs } from "@material-tailwind/react";
export function BreadcrumbsCustomSeparator() {
return (
<Breadcrumbs separator="-">
<a href="#" className="opacity-60">
Docs
</a>
<a href="#" className="opacity-60">
Components
</a>
<a href="#">Breadcrumbs</a>
</Breadcrumbs>
);
}## Breadcrumbs Custom Styles
You can use the className prop to add custom styles to the Breadcrumbs component.
<CodePreview component={<BreadcrumbsExamples.BreadcrumbsCustomStyles />}>
import { Breadcrumbs } from "@material-tailwind/react";
import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
export function BreadcrumbsCustomStyles() {
return (
<Breadcrumbs
separator={
<ArrowLongRightIcon className="h-4 w-4 text-white" strokeWidth={2.5} />
}
className="rounded-full border border-white bg-gradient-to-tr from-gray-900 to-gray-800 p-1"
>
<a
href="#"
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
>
Docs
</a>
<a
href="#"
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
>
Components
</a>
<a
href="#"
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
>
Breadcrumbs
</a>
</Breadcrumbs>
);
}## Breadcrumbs Props
The following props are available for breadcrumbs component. These are the custom props that we've added for the breadcrumbs component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
separator |
node |
Change breadcrumbs separator between it's elements | / |
fullWidth |
boolean |
Change breadcrumbs to a block level element | false |
className |
string |
Add custom className for breadcrumbs | '' |
children |
node |
Add content for breadcrumbs | No default value it's a required prop. |
import type { BreadcrumbsProps } from "@material-tailwind/react";## Breadcrumbs Theme
Learn how to customize the theme and styles for breadcrumbs component, the theme object for breadcrumbs component has two main objects:
A. The defaultProps object for setting up the default value for props of breadcrumbs component.
B. The styles object for customizing the theme and styles of breadcrumbs component.
You can customize the theme and styles of breadcrumbs component by adding Tailwind CSS classes as key paired values for objects.
## Breadcrumbs Theme Object Type
interface BreadcrumbsStyleTypes {
defaultProps: {
separator: node;
fullWidth: boolean;
className: string;
};
styles: {
base: {
root: {
initial: object;
fullWidth: object;
};
list: object;
item: {
initial: object;
disabled: object;
};
separator: object;
};
};
}import type { BreadcrumbsStyleTypes } from "@material-tailwind/react";## Breadcrumbs Theme Customization
const theme = {
breadcrumbs: {
defaultProps: {
className: "",
fullWidth: false,
separator: "/",
},
styles: {
base: {
root: {
initial: {
width: "w-max",
},
fullWidth: { display: "block", width: "w-full" },
},
list: {
display: "flex",
flexWrap: "flex-wrap",
alignItems: "items-center",
width: "w-full",
bg: "bg-blue-gray-50",
bgOpacity: "bg-opacity-60",
py: "py-2",
px: "px-4",
borderRadius: "rounded-md",
},
item: {
initial: {
display: "flex",
alignItems: "items-center",
color: "text-blue-gray-900",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-sm",
fontWeight: "font-normal",
lineHeight: "leading-normal",
cursor: "cursor-pointer",
transition: "transition-colors duration-300",
hover: "hover:text-light-blue-500",
},
disabled: {
pointerEvents: "pointer-events-none",
},
},
separator: {
color: "text-blue-gray-500",
fontSize: "text-sm",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontWeight: "font-normal",
lineHeight: "leading-normal",
px: "mx-2",
pointerEvents: "pointer-events-none",
userSelcet: "select-none",
},
},
},
},
};