Breadcrumb

Breadcrumbs are a navigation system used to show a user's location in a site or app.

Example

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
                                    <li class="inline-flex items-center">
                                    <a class="flex items-center text-base text-gray-500
                                          hover:text-indigo-600 focus:outline-none focus:text-indigo-600 " href="#">Home</a>
                                    <svg class="flex-shrink-0 h-5 w-5 text-gray-400
                                          mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
                                    </svg>
                                    </li>
                                    <li class="inline-flex items-center">
                                    <a class="flex items-center text-base text-gray-500
                                          hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">
                                    Library
                                    <svg class="flex-shrink-0 h-5 w-5 text-gray-400
                                          mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
                                    </svg>
                                    </a>
                                    </li>
                                    <li class="inline-flex items-center text-base
                                          font-semibold text-gray-800 truncate" aria-current="page">Data</li>
                                    </ol>

Divider

The simple form of chevron breadcrumbs.

<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
                                    <li class="inline-flex items-center">
                                    <a class="flex items-center text-base text-gray-500
                                          hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">Home</a>
                                    <svg
                                       class="flex-shrink-0 mx-2 overflow-visible h-4
                                          w-4 text-gray-400"
                                       xmlns="http://www.w3.org/2000/svg"
                                       width="24"
                                       height="24"
                                       viewBox="0 0 24 24"
                                       fill="none"
                                       stroke="currentColor"
                                       stroke-width="2"
                                       stroke-linecap="round"
                                       stroke-linejoin="round"
                                       >
                                    <path d="m9 18 6-6-6-6" />
                                    </svg>
                                    </li>
                                    <li class="inline-flex items-center">
                                    <a class="flex items-center text-base text-gray-500
                                          hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">
                                    Library
                                    <svg
                                       class="flex-shrink-0 mx-2 overflow-visible h-4
                                          w-4 text-gray-400"
                                       xmlns="http://www.w3.org/2000/svg"
                                       width="24"
                                       height="24"
                                       viewBox="0 0 24 24"
                                       fill="none"
                                       stroke="currentColor"
                                       stroke-width="2"
                                       stroke-linecap="round"
                                       stroke-linejoin="round"
                                       >
                                    <path d="m9 18 6-6-6-6" />
                                    </svg>
                                    </a>
                                    </li>
                                    <li class="inline-flex items-center text-base
                                          font-semibold text-gray-800 truncate" aria-current="page">Data</li>
                                    </ol>
Buy Pro