Cartzilla Docs

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>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla

Navbar

Supported content

Color schemes

Responsive offcanvas menu