# Breadcrumb

## Component #1

- Preview
- HTML

# Personal info

Log out

                    <!-- Breadcrumb -->
                    <div class="navbar-dark bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                      <div class="container content-space-1 content-space-b-lg-3">
                        <div class="row align-items-center">
                          <div class="col">
                            <div class="d-none d-lg-block">
                              <h1 class="h2 text-white">Personal info</h1>
                            </div>

                            <!-- Breadcrumb -->
                            <nav aria-label="breadcrumb">
                              <ol class="breadcrumb breadcrumb-light mb-0">
                                <li class="breadcrumb-item">Account</li>
                                <li class="breadcrumb-item active" aria-current="page">Personal Info</li>
                              </ol>
                            </nav>
                            <!-- End Breadcrumb -->
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <div class="d-none d-lg-block">
                              <a class="btn btn-soft-light btn-sm" href="#">Log out</a>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Breadcrumb -->

## Component #2

- Preview
- HTML

Save Share

                    <!-- Breadcrumb -->
                    <div class="container">
                      <div class="row align-items-lg-center">
                        <div class="col-lg mb-2 mb-lg-0">
                          <!-- Breadcrumb -->
                          <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                              <li class="breadcrumb-item"><a href="#">For Sale</a></li>
                              <li class="breadcrumb-item"><a href="#">England</a></li>
                              <li class="breadcrumb-item"><a href="#">London</a></li>
                              <li class="breadcrumb-item"><a href="#">Studio</a></li>
                              <li class="breadcrumb-item active" aria-current="page">470 Lucy Forks, Patriciafurt, YC7B</li>
                            </ol>
                          </nav>
                          <!-- End Breadcrumb -->
                        </div>
                        <!-- End Col -->

                        <div class="col-lg-auto">
                          <a class="btn btn-sm btn-ghost-secondary" href="javascript:;">
                            <i class="bi-heart me-2"></i> Save
                          </a>

                          <a class="btn btn-sm btn-ghost-secondary" href="javascript:;">
                            <i class="bi-share-fill me-2"></i> Share
                          </a>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Breadcrumb -->

## Component #3

- Preview
- HTML

#### Products Grid

                    <!-- Breadcrumb -->
                    <div class="bg-light">
                      <div class="container py-4">
                        <div class="row">
                          <div class="col-sm">
                            <h4 class="mb-0">Products Grid</h4>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-auto">
                            <!-- Breadcrumb -->
                            <nav aria-label="breadcrumb">
                              <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                  <a href="../demo-shop/index.html">Shop</a>
                                </li>
                                <li class="breadcrumb-item">
                                  <a href="../demo-shop/products-grid.html">Products</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Grid</li>
                              </ol>
                            </nav>
                            <!-- End Breadcrumb -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Breadcrumb -->