Breadcrumb

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



                    <div class="component-breadcrumb">

                      <div class="container-fluid">

                        <div class="row">

                          <div class="col">

                            <ul>

                              <li><a href="#">Home</a></li>

                              <li><a href="#">Products</a></li>

                              <li>Velocify</li>

                            </ul>

                          </div>

                        </div>

                      </div>

                    </div>



                    <div class="component-breadcrumb bg-gray-200">

                      <div class="container-fluid">

                        <div class="row">

                          <div class="col">

                            <ul>

                              <li><a href="#">Home</a></li>

                              <li><a href="#">Products</a></li>

                              <li>Velocify</li>

                            </ul>

                          </div>

                        </div>

                      </div>

                    </div>



                    <div class="component-breadcrumb bg-icenight">

                      <div class="container-fluid">

                        <div class="row">

                          <div class="col">

                            <ul>

                              <li><a href="#">Home</a></li>

                              <li><a href="#">Products</a></li>

                              <li>Velocify</li>

                            </ul>

                          </div>

                        </div>

                      </div>

                    </div>

Prevent a breadcrumb from wrapping on the next line and make it scrollable horizontally with a .breadcrumb-scroll modifier.

Breadcrumb

Scrollable

Jump to