Bootstrap docs

# Navbar

Responsive navigation header that includes support for branding, navigation, and more.

#### Supported content

    <!-- Change to "container-fluid" for full width navbar -->

    <!-- Navbar with multi-level dropdown + CTA button -->
    <header class="navbar navbar-expand-lg bg-body shadow px-0">
      <div class="container py-1">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          Cartzilla
        </a>
        <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-controls="navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <nav class="collapse navbar-collapse" id="navbarCollapse1">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li class="dropend">
                  <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action link</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><a class="dropdown-item" href="#">Yet another link</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <a class="btn btn-primary animate-shake mt-3 mt-lg-0" href="#">
            <i class="ci-user animate-target ms-n1 me-2"></i>
            Sign up
          </a>
        </nav>
      </div>
    </header>

    <!-- Navbar with simple navigation + Action buttons group -->
    <header class="navbar navbar-expand-lg bg-body shadow px-0">
      <div class="container">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="d-flex align-items-center order-lg-2 py-lg-1">
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-scale" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-sm-inline-flex" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em; --cz-border-color: var(--cz-body-bg)">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-controls="navbarCollapse2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse" id="navbarCollapse2">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
          <a class="btn btn-secondary d-sm-none mt-3 mb-2 mt-lg-0" href="#!">
            <i class="ci-user ms-n1 me-2"></i>
            Sign up
          </a>
        </nav>
      </div>
    </header>

    <!-- Multi-level navbar with search bar, action buttons group, "Categories" dropdown button and navigation links -->
    <header class="navbar navbar-expand-lg d-block bg-body shadow px-0">

      <!-- First level: Brand (logo) + search bar + action buttons group -->
      <div class="container d-flex align-items-center justify-content-between">
        <a class="navbar-brand flex-shrink-0" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="position-relative w-100 d-none d-md-block mx-3 mx-lg-4">
          <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="search" class="form-control form-icon-start" placeholder="Search" aria-label="Search">
        </div>
        <div class="d-flex align-items-center py-lg-1">
          <div class="dropdown">
            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
              <span class="theme-icon-active d-flex animate-target">
                <i class="ci-sun"></i>
              </span>
            </button>
            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
              <li>
                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-sun"></i>
                  </span>
                  <span class="theme-label">Light</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
              <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-moon"></i>
                  </span>
                  <span class="theme-label">Dark</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
              <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-auto"></i>
                  </span>
                  <span class="theme-label">Auto</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
            </ul>
          </div>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-sm-inline-flex" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em; --cz-border-color: var(--cz-body-bg)">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-controls="navbarCollapse3" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>

      <!-- Second level: Categories dropdown + collapsible navigation -->
      <div class="container">
        <nav class="collapse navbar-collapse" id="navbarCollapse3">
          <div class="position-relative d-md-none mt-3">
            <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
            <input type="search" class="form-control form-icon-start" placeholder="Search" aria-label="Search">
          </div>
          <div class="d-lg-flex pt-3 pb-2">
            <div class="dropdown mb-2 mb-lg-0">
              <button type="button" class="btn btn-secondary fs-base dropdown-toggle me-2" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ci-grid fs-lg ms-n1 me-2"></i>
                Categories
              </button>
              <ul class="dropdown-menu" style="--cz-dropdown-spacer: .5rem">
                <li>
                  <a class="dropdown-item fw-medium d-flex pe-3" href="#">
                    <i class="ci-monitor-2 fs-xl opacity-60 pe-1 me-2"></i>
                    <span class="text-truncate">TV, Video & Audio</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item fw-medium d-flex pe-3" href="#">
                    <i class="ci-speaker-2 fs-xl opacity-60 pe-1 me-2"></i>
                    <span class="text-truncate">Speakers & Home Music</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item fw-medium d-flex pe-3" href="#">
                    <i class="ci-camera-2 fs-xl opacity-60 pe-1 me-2"></i>
                    <span class="text-truncate">Cameras, Photo & Video</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item fw-medium d-flex pe-3" href="#">
                    <i class="ci-battery-2 fs-xl opacity-60 pe-1 me-2"></i>
                    <span class="text-truncate">Charging Stations</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item fw-medium d-flex pe-3" href="#">
                    <i class="ci-headphones-2 fs-xl opacity-60 pe-1 me-2"></i>
                    <span class="text-truncate">Headphones</span>
                  </a>
                </li>
              </ul>
            </div>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contacts</a>
              </li>
            </ul>
            <a class="btn btn-secondary d-sm-none mt-3 mb-2 mt-lg-0" href="#!">
              <i class="ci-user ms-n1 me-2"></i>
              Sign up
            </a>
          </div>
        </nav>
      </div>
    </header>

#### Color schemes

    <!-- Change to "container-fluid" for full width navbar -->

    <!-- Dark navbar -->
    <header class="navbar navbar-expand-lg navbar-dark bg-dark px-0" data-bs-theme="dark">
      <div class="container">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="d-flex align-items-center order-lg-2">
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-scale" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 border-dark rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarDarkCollapse" aria-controls="navbarDarkCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse" id="navbarDarkCollapse">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li><a class="dropdown-item" href="#">Yet another link</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Info navbar -->
    <header class="navbar navbar-expand-lg navbar-dark bg-info px-0">
      <div class="container">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="d-flex align-items-center order-lg-2" data-bs-theme="dark">
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-scale" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary bg-white bg-opacity-10 border-0 position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success bg-opacity-100 border border-3 border-info rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarInfoCollapse" aria-controls="navbarInfoCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse" id="navbarInfoCollapse">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li><a class="dropdown-item" href="#">Yet another link</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Gray navbar -->
    <header class="navbar navbar-expand-lg bg-body-secondary px-0">
      <div class="container">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="d-flex align-items-center order-lg-2">
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-scale" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary bg-body border-0 position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em; --cz-border-color: var(--cz-secondary-bg)">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarGrayCollapse" aria-controls="navbarGrayCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse" id="navbarGrayCollapse">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Yet another link</a></li>
                <li class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Subtle primary navbar -->
    <header class="navbar navbar-expand-lg bg-primary-subtle px-0">
      <div class="container">
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
          </span>
          <span class="d-none d-sm-inline">Cartzilla</span>
          <span class="d-sm-none">Cz</span>
        </a>
        <div class="d-flex align-items-center order-lg-2">
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-scale" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake" href="#" aria-label="Account">
            <i class="ci-user animate-target"></i>
          </a>
          <button type="button" class="btn btn-icon btn-lg btn-secondary bg-primary bg-opacity-10 border-0 position-relative rounded-circle ms-2" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success bg-opacity-100 border border-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em; --cz-border-color: var(--cz-primary-bg-subtle)">3</span>
            <span class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
              <i class="ci-shopping-cart animate-target ms-n1"></i>
            </span>
          </button>
          <button type="button" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarPrimaryCollapse" aria-controls="navbarPrimaryCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse" id="navbarPrimaryCollapse">
          <ul class="navbar-nav pt-2 pt-lg-0 me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li><a class="dropdown-item" href="#">Yet another link</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

#### Responsive offcanvas menu

    <!-- Navbar with offcanvas menu on screens smaller than 500px (xs) -->
    <header class="navbar navbar-expand-lg bg-body sticky-top p-0">
      <div class="container py-3">

        <!-- Navbar brand (Logo) -->
        <a class="navbar-brand" href="#">
          <span class="d-flex flex-shrink-0 text-primary me-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"/><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"/><use href="#czlogo"/><use href="#czlogo" x="8.516" y="-2.172"/></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"/></defs></svg>
          </span>
          Cartzilla
        </a>

        <!-- Menu toggler -->
        <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Offcanvas menu -->
        <div class="offcanvas offcanvas-end" id="navbarOffcanvas" tabindex="-1" aria-labelledby="navbarOffcanvasLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="navbarOffcanvasLabel">Menu</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body pt-0">
            <ul class="navbar-nav ms-lg-4">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action link</a></li>
                  <li class="dropend">
                    <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Dropdown
                    </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Action link</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                      <li><a class="dropdown-item" href="#">Yet another link</a></li>
                    </ul>
                  </li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li class="dropdown-divider"><hr></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>

Top