Basic example
Breadcrumb components are an important component in any website or application that can be used to indicate the current position of a page in a hierarchical page structure.
Use the following breadcrumb example to show the hierarchical structure of pages.
import React from 'react';
export default function App() {
return (
// First breadcrumb
<nav className="w-full rounded-md">
<ol className="list-reset flex">
<li className="text-neutral-500 dark:text-neutral-400">Home</li>
</ol>
</nav>
// Second breadcrumb
<nav className="w-full rounded-md">
<ol className="list-reset flex">
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>Home</a
>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li className="text-neutral-500 dark:text-neutral-400">Library</li>
</ol>
</nav>
// Third breadcrumb
<nav className="w-full rounded-md">
<ol className="list-reset flex">
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>Home</a
>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>Library</a
>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li className="text-neutral-500 dark:text-neutral-400">Data</li>
</ol>
</nav>
);
}
Breadcrumb in navbar
You can use breadcrumb together with navbar.
import React from 'react';
export default function App() {
return (
<nav
className="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-3 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:flex-wrap lg:justify-start"
data-te-navbar-ref
>
<div className="flex w-full flex-wrap items-center justify-between px-3">
<nav
className="bg-grey-light w-full rounded-md"
aria-label="breadcrumb"
>
<ol className="list-reset flex">
<li>
<a
href="#"
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-200"
>
Home
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-200">
/
</span>
</li>
<li>
<a
href="#"
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-200"
>
Library
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-200">
/
</span>
</li>
<li>
<a
href="#"
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-200"
>
Data
</a>
</li>
</ol>
</nav>
</div>
</nav>
);
}
Changing the separator
Use the following example to change the separator dividing each breadcrumb.
import React from 'react';
export default function App() {
return (
<nav className="bg-grey-light w-full rounded-md">
<ol className="list-reset flex">
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Home
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-400">
{"<"}
</span>
</li>
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Library
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-400">
{">"}
</span>
</li>
<li className="text-neutral-500 dark:text-neutral-400">Data</li>
</ol>
</nav>
);
}
Without separators
Use the following example to remove breadcrumbs separators.
import React from 'react';
export default function App() {
return (
<nav className="bg-grey-light w-full rounded-md">
<ol className="list-reset flex">
<li>
<a
href="#"
className="mr-2 text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Home
</a>
</li>
<li>
<a
href="#"
className="mr-2 text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Library
</a>
</li>
<li className="text-neutral-500 dark:text-neutral-400">Data</li>
</ol>
</nav>
);
}
With background
Use of a solid background can make the breadcrumbs section stand out, making it easy for the user to navigate the page.
import React from 'react';
export default function App() {
return (
<nav className="w-full rounded-md bg-neutral-100 px-5 py-3 dark:bg-neutral-600">
<ol className="list-reset flex">
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Home
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-300">
/
</span>
</li>
<li>
<a
href="#"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>
Library
</a>
</li>
<li>
<span className="mx-2 text-neutral-500 dark:text-neutral-300">
/
</span>
</li>
<li className="text-neutral-500 dark:text-neutral-300">Data</li>
</ol>
</nav>
);
}
Related resources
If you are looking for more advanced options, try Bootstrap Breadcrumbs from MDBootstrap.