Skip to main content

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example


            
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent py-3 px-0 mb-3 small">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Category</a></li>
                  <li class="breadcrumb-item"><a href="#">Sub Category</a></li>
                  <li class="breadcrumb-item active d-none d-md-block" aria-current="page">title</li>
                </ol>
              </nav>

              <nav aria-label="breadcrumb">
                <ol class="breadcrumb p-3 bg-black mb-3 rounded small">
                  <li class="breadcrumb-item"><a class="text-light" href="#">Home</a></li>
                  <li class="breadcrumb-item"><a class="text-light" href="#">Category</a></li>
                  <li class="breadcrumb-item"><a class="text-light" href="#">Sub Category</a></li>
                  <li class="breadcrumb-item active text-light d-none d-md-block" aria-current="page">title</li>
                </ol>
              </nav>

              <nav aria-label="breadcrumb">
                <ol class="breadcrumb p-3 bg-light mb-3 rounded small">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Category</a></li>
                  <li class="breadcrumb-item"><a href="#">Sub Category</a></li>
                  <li class="breadcrumb-item active d-none d-md-block" aria-current="page">title</li>
                </ol>
              </nav>