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.
<!--First breadcrumb-->
<nav class="w-full rounded-md">
<ol class="list-reset flex">
<li class="text-neutral-500 dark:text-neutral-400">Home</li>
</ol>
</nav>
<!--Second breadcrumb-->
<nav class="w-full rounded-md">
<ol class="list-reset flex">
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li class="text-neutral-500 dark:text-neutral-400">Library</li>
</ol>
</nav>
<!--Third breadcrumb-->
<nav class="w-full rounded-md">
<ol class="list-reset flex">
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
</li>
<li class="text-neutral-500 dark:text-neutral-400">Data</li>
</ol>
</nav>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Breadcrumb in navbar
You can use breadcrumb together with navbar.
<nav
class="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 class="flex w-full flex-wrap items-center justify-between px-3">
<nav class="bg-grey-light w-full rounded-md" aria-label="breadcrumb">
<ol class="list-reset flex">
<li>
<a
href="#"
class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-200"
>Home</a
>
</li>
<li>
<span class="mx-2 text-neutral-500 dark:text-neutral-200"
>/</span
>
</li>
<li>
<a
href="#"
class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-200"
>Library</a
>
</li>
<li>
<span class="mx-2 text-neutral-500 dark:text-neutral-200"
>/</span
>
</li>
<li>
<a
href="#"
class="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.
<nav class="bg-grey-light w-full rounded-md">
<ol class="list-reset flex">
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-400">></span>
</li>
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-400">></span>
</li>
<li class="text-neutral-500 dark:text-neutral-400">Data</li>
</ol>
</nav>
Without separators
Use the following example to remove breadcrumbs separators.
<nav class="bg-grey-light w-full rounded-md">
<ol class="list-reset flex">
<li>
<a
href="#"
class="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="#"
class="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 class="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.
<nav
class="w-full rounded-md bg-neutral-100 px-5 py-3 dark:bg-neutral-600">
<ol class="list-reset flex">
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-300">/</span>
</li>
<li>
<a
href="#"
class="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 class="mx-2 text-neutral-500 dark:text-neutral-300">/</span>
</li>
<li class="text-neutral-500 dark:text-neutral-300">Data</li>
</ol>
</nav>
Related resources
Tutorials:
Extended Docs:
colors
typography
headers
navbar
pagination
scrollspy
buttons
link
paragraphs
colors
dark theme
letter spacing
paragraph spacing
spacing
sticky
text color
text decoration
tree view