search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Breadcrumbs

    Tailwind CSS React Breadcrumbs

    Use responsive breadcrumbs component with helper examples for breadcrumbs menu, breadcrumbs navigation bar & more.


    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.

    1. Home

    1. Home
    2. /
    3. Library

    1. Home
    2. /
    3. Library
    4. /
    5. Data
    • JSX
            
                
          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>  
            );
          }
          
            
        

    Hey there 👋 we're excited about TW Elements for React and want to see it grow! 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.

    1. Home
    2. /
    3. Library
    4. /
    5. Data
    • JSX
            
                
          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.

    1. Home
    2. >
    3. Library
    4. >
    5. Data
    • JSX
            
                
          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.

    1. Home
    2. Library
    3. Data
    • JSX
            
                
          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.

    1. Home
    2. /
    3. Library
    4. /
    5. Data
    • JSX
            
                
          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

    Bootstrap Side Navbar How To Center A Bootstrap Button? How to center Bootstrap Navbar How to change Bootstrap Navbar color Link Navbar Bootstrap Button Tutorial

    If you are looking for more advanced options, try Bootstrap Breadcrumbs from MDBootstrap.

    • Basic example
    • Breadcrumb in navbar
    • Changing the separator
    • Without separators
    • With background
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com