Navbar

<!-- Basic navbar -->
<header class="navbar navbar-expand-lg navbar-light shadow-sm">
  <div class="container">

    <!-- Brand -->
    <a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
      <img width="142" src="path-to-logo" alt="Cartzilla"/>
    </a>
    <a class="navbar-brand d-lg-none me-2" href="#">
      <img width="74" src="path-to-logo" alt="Cartzilla"/>
    </a>

    <!-- Toolbar -->
    <div class="navbar-toolbar d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-tool" href="#">
        <div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-search"></i></div>
      </a>
      <a class="navbar-tool ms-1 me-n1" href="#">
        <div class="navbar-tool-icon-box">
          <i class="navbar-tool-icon ci-user"></i>
        </div>
      </a>
      <a class="navbar-tool ms-3" href="#">
        <div class="navbar-tool-icon-box bg-secondary">
          <span class="navbar-tool-label">4</span>
          <i class="navbar-tool-icon ci-cart"></i>
        </div>
      </a>
    </div>

    <!-- Collapsible menu -->
    <div class="collapse navbar-collapse me-auto order-lg-2" id="navbarCollapse">
      <hr class="d-lg-none my-3">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" 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-auto-close="outside">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action link</a></li>
            <li class="dropdown">
              <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>

// Basic navbar
header.navbar.navbar-expand-lg.navbar-light.shadow-sm
  .container

    // Brand
    a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
      img(src="path-to-logo" width="142" alt="Cartzilla")
    a(href="#").navbar-brand.d-lg-none.me-2
      img(src="path-to-logo" width="74" alt="Cartzilla")
    
    // Toolbar
    .navbar-toolbar.d-flex.align-items-center.order-lg-3
      button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
        span.navbar-toggler-icon
      a(href="#").navbar-tool
        .navbar-tool-icon-box: i.navbar-tool-icon.ci-search
      a(href="#").navbar-tool.ms-1.me-n1
        .navbar-tool-icon-box: i.navbar-tool-icon.ci-user
      a(href="#").navbar-tool.ms-3
        .navbar-tool-icon-box.bg-secondary
          span.navbar-tool-label 4
          i.navbar-tool-icon.ci-cart

    // Collapsible menu
    #navbarCollapse.collapse.navbar-collapse.me-auto.order-lg-2
      hr.d-lg-none.my-3
      ul.navbar-nav
        li.nav-item.active
          a.nav-link(href="#") Home
        li.nav-item
          a.nav-link(href="#") Link
        li.nav-item.dropdown
          a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
          ul.dropdown-menu
            li
              a.dropdown-item(href="#") Action link
            li.dropdown
              a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
                | Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href="#") Action link
                li
                  a.dropdown-item(href="#") Another action
                li
                  a.dropdown-item(href="#") Something else here
                li
                  a.dropdown-item(href="#") Yet another link
            li
              a.dropdown-item(href="#") Another action
            li.dropdown-divider 
            li
              a.dropdown-item(href="#") Something else here
        li.nav-item
          a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled

<!-- Dark navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

<!-- Custom color navbar -->
<header class="navbar navbar-expand-lg navbar-light" style="background-color: #f2f5fc;">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

// Dark navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  .container
    //- Navbar content

// Accent navbar
header.navbar.navbar-expand-lg.navbar-accent.bg-dark
  .container
    //- Navbar content
    
// Custom color navbar
header.navbar.navbar-expand-lg.bg-light(style="background-color: #f2f5fc;")
  .container
    //- Navbar content

<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
  <div class="container">
    <div class="topbar-text dropdown d-md-none">
      <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
      <ul class="dropdown-menu">
        <li>
          <a class="dropdown-item" href="tel:00331697720">
            <i class="ci-support text-muted me-2"></i>
            (00) 33 169 7720
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="#">
            <i class="ci-location text-muted me-2"></i>
            Order tracking
          </a>
        </li>
      </ul>
    </div>
    <div class="topbar-text text-nowrap d-none d-md-inline-block">
      <i class="ci-support"></i>
      <span class="text-muted me-1">Support</span>
      <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
    </div>
    <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
    <div class="ms-3 text-nowrap">
      <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
        <i class="ci-location"></i>
        Order tracking
      </a>
      <div class="topbar-text dropdown disable-autohide">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          <img class="me-2" width="20" src="path-to-image" alt="English"/>
          Eng / $
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li class="dropdown-item">
            <select class="form-select form-select-sm">
              <option value="usd">$ USD</option>
              <option value="eur">€ EUR</option>
              <option value="ukp">£ UKP</option>
              <option value="jpy">¥ JPY</option>
            </select>
          </li>
          <li>
            <a class="dropdown-item pb-1" href="#">
              <img class="me-2" width="20" src="path-to-image" alt="Français"/>
              Français
            </a>
          </li>
          <li>
            <a class="dropdown-item pb-1" href="#">
              <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
              Deutsch
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
            <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
            Italiano
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
  <div class="container">
     <!-- Topbar content -->
  </div>
</div>

// Light topbar
.topbar.topbar-light.bg-secondary
  .container
    .topbar-text.dropdown.d-md-none
      a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle Useful links
      ul.dropdown-menu
        li
          a(href="tel:00331697720").dropdown-item
            i.ci-support.text-muted.me-2
            | (00) 33 169 7720
        li
          a(href="#").dropdown-item
            i.ci-location.text-muted.me-2
            | Order tracking
    .topbar-text.text-nowrap.d-none.d-md-inline-block
      i.ci-support
      span.text-muted.me-1 Support
      a.topbar-link(href="tel:00331697720") (00) 33 169 7720
    .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
    .ms-3.text-nowrap
      a(href="#").topbar-link.me-4.d-none.d-md-inline-block
        i.ci-location
        | Order tracking
      .topbar-text.dropdown.disable-autohide
        a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
          img(src="path-to-image" width="20" alt="English").me-2
          | Eng / $
        ul.dropdown-menu.dropdown-menu-end
          li.dropdown-item
            select.form-select.form-select-sm
              option(value="usd") $ USD
              option(value="eur") € EUR
              option(value="ukp") £ UKP
              option(value="jpy") ¥ JPY
          li
            a(href="#").dropdown-item.pb-1
              img(src="path-to-image" width="20" alt="Français").me-2
              | Français
          li
            a(href="#").dropdown-item.pb-1
              img(src="path-to-image" width="20" alt="Deutsch").me-2
              | Deutsch
          li
            a(href="#").dropdown-item
              img(src="path-to-image" width="20" alt="Italiano").me-2
              | Italiano

// Dark topbar
.topbar.topbar-dark.bg-dark
  .container
    //- Topbar content

<!-- Topbar + Navbar -->
<header>
  <div class="topbar topbar-dark bg-dark">
    <div class="container">
      <!-- Topbar content -->
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light shadow-sm">
    <div class="container">
      <!-- Navbar content -->
    </div>
  </div>
</header>

// Topbar + Navbar
header.shadow-sm
  .topbar.topbar-dark.bg-dark
    .container
      //- Topbar content

  .navbar.navbar-expand-lg.navbar-light
    .container
      //- Navbar content

<!-- Multilevel light navbar -->
<header class="shadow-sm">
  <div class="topbar topbar-dark bg-dark">
    <div class="container">
      <div class="topbar-text dropdown d-md-none">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="ci-support text-muted me-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="ci-location text-muted me-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="ci-support"></i>
        <span class="text-muted me-1">Support</span>
        <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
      </div>
      <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
      <div class="ms-3 text-nowrap">
        <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
          <i class="ci-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            <img class="me-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li class="dropdown-item">
              <select class="form-select form-select-sm">
                <option value="usd">$ USD</option>
                <option value="eur">€ EUR</option>
                <option value="ukp">£ UKP</option>
                <option value="jpy">¥ JPY</option>
              </select>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
                Italiano
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none me-2" href="#">
        <img width="74" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group d-none d-lg-flex flex-nowrap mx-4">
        <input class="form-control pe-5" type="text" placeholder="Search for products">
        <i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-tool d-lg-none" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-search"></i>
          </div>
        </a>
        <a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-user"></i>
          </div>
          <div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ms-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon ci-cart"></i>
          </div>
          <div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
        </a>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light bg-light mt-n2 pt-0 pb-2 px-3 px-lg-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="d-lg-none my-3">
        <ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle ps-0" href="#">
              <i class="ci-view-grid me-2"></i>
              Departments
            </a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

// Multilevel light navbar
header.shadow-sm
  .topbar.topbar-dark.bg-dark
    .container
      .topbar-text.dropdown.d-md-none
        a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
          | Useful links
        ul.dropdown-menu
          li
            a(href="tel:00331697720").dropdown-item
              i.ci-support.text-muted.me-2
              | (00) 33 169 7720
          li
            a(href="#").dropdown-item
              i.ci-location.text-muted.me-2
              | Order tracking
      .topbar-text.text-nowrap.d-none.d-md-inline-block
        i.ci-support
        span.text-muted.me-1 Support
        a(href="tel:00331697720").topbar-link
          | (00) 33 169 7720
      .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
      .ms-3.text-nowrap
        a(href="#").topbar-link.me-4.d-none.d-md-inline-block
          i.ci-location
          | Order tracking
        .topbar-text.dropdown.disable-autohide
          a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
            img(src="path-to-image", width="20", alt="English").me-2
            | Eng / $
          ul.dropdown-menu.dropdown-menu-end
            li.dropdown-item
              select.form-select.form-select-sm
                option(value="usd") $ USD
                option(value="eur") € EUR
                option(value="ukp") £ UKP
                option(value="jpy") ¥ JPY
            li
              a(href="#").dropdown-item.pb-1
                img(src="path-to-image" width="20" alt="Français").me-2
                | Français
            li
              a(href="#").dropdown-item.pb-1
                img(src="path-to-image" width="20" alt="Deutsch").me-2
                | Deutsch
            li
              a(href="#").dropdown-item
                img(src="path-to-image" width="20" alt="Italiano").me-2
                | Italiano

  .navbar.navbar-expand-lg.navbar-light.bg-light
    .container
      a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
        img(src="path-to-logo", width="142", "Cartzilla")
      a(href="#").navbar-brand.d-lg-none.me-2
        img(src="path-to-logo", width="74", "Cartzilla")
      .input-group.d-none.d-lg-flex.flex-nowrap.mx-4
        input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
        i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
      .navbar-toolbar.d-flex.align-items-center
        button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
          span.navbar-toggler-icon
        a(href="#").navbar-tool.d-lg-none
          .navbar-tool-icon-box: i.navbar-tool-icon.ci-search
        a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
          .navbar-tool-icon-box: i.navbar-tool-icon.ci-user
          .navbar-tool-text.ms-n2
            small Hello, Sign in
            | My Account
        a(href="#").navbar-tool.ms-3
          .navbar-tool-icon-box.bg-secondary
            span.navbar-tool-label 4
            i.navbar-tool-icon.ci-cart
          .navbar-tool-text
            small My Cart
            | $265.00

  .navbar.navbar-expand-lg.navbar-light.bg-light.mt-n2.pt-0.pb-2.px-3.px-lg-0
    .container
      #navbarCollapse.collapse.navbar-collapse
        hr.d-lg-none.my-3
        ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
          li.nav-item.dropdown
            a(href="#").nav-link.dropdown-toggle.ps-0
              i.ci-view-grid.me-2
              | Departments
        ul.navbar-nav
          li.nav-item
            a.nav-link(href="#") Home
          li.nav-item
            a.nav-link(href="#") Shop
          li.nav-item
            a.nav-link(href="#") Pages
          li.nav-item
            a.nav-link(href="#") Blog
          li.nav-item
            a.nav-link(href="#") Components

<!-- Multilevel dark navbar -->
<header>
  <div class="topbar topbar-dark bg-darker">
    <div class="container">
      <div class="topbar-text dropdown d-md-none">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="ci-support text-muted me-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="ci-location text-muted me-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="ci-support"></i>
        <span class="text-muted me-1">Support</span>
        <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
      </div>
      <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
      <div class="ms-3 text-nowrap">
        <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
          <i class="ci-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            <img class="me-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end border border-light">
            <li class="dropdown-item">
              <select class="form-select form-select-sm">
                <option value="usd">$ USD</option>
                <option value="eur">€ EUR</option>
                <option value="ukp">£ UKP</option>
                <option value="jpy">¥ JPY</option>
              </select>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
                Italiano
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none me-2" href="#">
        <img width="74" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group d-none d-lg-flex flex-nowrap mx-4">
        <input class="form-control rounded-end pe-5" type="text" placeholder="Search for products">
        <i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-tool d-lg-none" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-search"></i>
          </div>
        </a>
        <a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-user"></i>
          </div>
          <div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ms-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon ci-cart"></i>
          </div>
          <div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
        </a>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-dark bg-dark mt-n2 pt-0 pb-2 px-3 px-lg-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="hr-light d-lg-none my-3">
        <ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle ps-0" href="#">
              <i class="ci-view-grid me-2"></i>
              Departments
            </a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

// Multilevel dark navbar
header
  .topbar.topbar-dark.bg-darker
    .container
      .topbar-text.dropdown.d-md-none
        a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
          | Useful links
        ul.dropdown-menu
          li
            a(href="tel:00331697720").dropdown-item
              i.ci-support.text-muted.me-2
              | (00) 33 169 7720
          li
            a(href="#").dropdown-item
              i.ci-location.text-muted.me-2
              | Order tracking
      .topbar-text.text-nowrap.d-none.d-md-inline-block
        i.ci-support
        span.text-muted.me-1 Support
        a(href="tel:00331697720").topbar-link
          | (00) 33 169 7720
      .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
      .ms-3.text-nowrap
        a(href="#").topbar-link.me-4.d-none.d-md-inline-block
          i.ci-location
          | Order tracking
        .topbar-text.dropdown.disable-autohide
          a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
            img(src="path-to-image", width="20", alt="English").me-2
            | Eng / $
          ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-end.border.border-light
            li.dropdown-item
              select.form-select.form-select-sm
                option(value="usd") $ USD
                option(value="eur") € EUR
                option(value="ukp") £ UKP
                option(value="jpy") ¥ JPY
            li
              a(href="#").dropdown-item.pb-1
                img(src="path-to-image", width="20", alt="Français").me-2
                | Français
            li
              a(href="#").dropdown-item.pb-1
                img(src="path-to-image", width="20", alt="Deutsch").me-2
                | Deutsch
            li
              a(href="#").dropdown-item
                img(src="path-to-image", width="20", alt="Italiano").me-2
                | Italiano

  .navbar.navbar-expand-lg.navbar-dark.bg-dark
    .container
      a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
        img(src="path-to-logo", width="142", alt="Cartzilla")
      a(href="#").navbar-brand.d-lg-none.me-2
        img(src="path-to-logo", width="74", alt="Cartzilla")
      .input-group.d-none.d-lg-flex.flex-nowrap.mx-4
        input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
        i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
      .navbar-toolbar.d-flex.align-items-center
        button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
          span.navbar-toggler-icon
        a(href="#").navbar-tool.d-lg-none
          .navbar-tool-icon-box: i.navbar-tool-icon.ci-search
        a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
          .navbar-tool-icon-box: i.navbar-tool-icon.ci-user
          .navbar-tool-text.ms-n2
            small Hello, Sign in
            | My Account
        a(href="#").navbar-tool.ms-3
          .navbar-tool-icon-box.bg-secondary
            span.navbar-tool-label 4
            i.navbar-tool-icon.ci-cart
          .navbar-tool-text
            small My Cart
            | $265.00

  .navbar.navbar-expand-lg.navbar-dark.bg-dark.mt-n2.pt-0.pb-2.px-3.px-lg-0
    .container
      #navbarCollapse.collapse.navbar-collapse
        hr.hr-light.d-lg-none.my-3
        ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
          li.nav-item.dropdown
            a(href="#").nav-link.dropdown-toggle.ps-0
              i.ci-view-grid.me-2
              | Departments
        ul.navbar-nav
          li.nav-item
            a.nav-link(href="#") Home
          li.nav-item
            a.nav-link(href="#") Shop
          li.nav-item
            a.nav-link(href="#") Pages
          li.nav-item
            a.nav-link(href="#") Blog
          li.nav-item
            a.nav-link(href="#") Components

<!-- Offcanvas menu example -->
<!-- Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar -->
<header class="navbar navbar-light shadow-sm">
  <div class="container">

    <!-- Brand -->
    <a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
      <img width="142" src="path-to-logo" alt="Cartzilla"/>
    </a>
    <a class="navbar-brand d-lg-none me-2" href="#">
      <img width="74" src="path-to-logo" alt="Cartzilla"/>
    </a>

    <!-- Toolbar -->
    <div class="navbar-toolbar d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>

    <!-- Offcanvas menu -->
    <div class="offcanvas offcanvas-end me-auto order-lg-2" id="navbarOffcanvas">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">Menu</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" 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-auto-close="outside">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action link</a></li>
              <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

// Offcanvas menu example
// Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar
header.navbar.navbar-light.shadow-sm
  .container

    // Brand
    a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
      img(src="path-to-logo" width="142" alt="Cartzilla")
    a(href="#").navbar-brand.d-lg-none.me-2
      img(src="path-to-logo" width="74" alt="Cartzilla")
    
    // Toolbar
    .navbar-toolbar.d-flex.align-items-center.order-lg-3
      button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarOffcanvas").navbar-toggler
        span.navbar-toggler-icon

    // Offcanvas menu
    #navbarOffcanvas.collapse.navbar-collapse.me-auto.order-lg-2
      .offcanvas-header
        h5.offcanvas-title Menu
        button(type="button", data-bs-dismiss="offcanvas", aria-label="Close").btn-close.text-reset
      .offcanvas-body
        ul.navbar-nav
          li.nav-item.active
            a.nav-link(href="#") Home
          li.nav-item
            a.nav-link(href="#") Link
          li.nav-item.dropdown
            a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
            ul.dropdown-menu
              li
                a.dropdown-item(href="#") Action link
              li.dropdown
                a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
                  | Dropdown
                ul.dropdown-menu
                  li
                    a.dropdown-item(href="#") Action link
                  li
                    a.dropdown-item(href="#") Another action
                  li
                    a.dropdown-item(href="#") Something else here
                  li
                    a.dropdown-item(href="#") Yet another link
              li
                a.dropdown-item(href="#") Another action
              li.dropdown-divider 
              li
                a.dropdown-item(href="#") Something else here
          li.nav-item
            a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled