Code&Play | Navbar

Basic example

<!-- Basic navbar: Button (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-2 me-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-dsktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="btn btn-primary d-none d-sm-inline-block ms-3" href="#">Sign up</a>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse1">
      <ul class="navbar-nav me-auto">
        <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">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: Toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-2 me-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-desktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-tool">
        <a class="navbar-tool-icon-box me-2" href="#">
          <i class="ai-search"></i>
        </a>
      </div>
      <div class="navbar-tool d-none d-sm-flex">
        <a class="navbar-tool-icon-box me-2" href="#">
          <i class="ai-user"></i>
        </a>
      </div>
      <div class="border-start me-2" style="height: 30px;"></div>
      <div class="navbar-tool me-2">
        <a class="navbar-tool-icon-box" href="#">
          <i class="ai-shopping-cart"></i>
          <span class="navbar-tool-badge">3</span>
        </a>
      </div>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse2">
      <!-- Site menu goes here. See example above -->
    </div>
  </div>
</header>

<!-- Basic navbar: Logged in user (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-2 me-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-desktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-tool dropdown">
        <a class="navbar-tool-icon-box" href="#">
          <img class="navbar-tool-icon-box-img" src="path-to-image" alt="Avatar"/>
        </a>
        <a class="navbar-tool-label dropdown-toggle" href="#"><small>Hello,</small>Amanda</a>
        <ul class="dropdown-menu dropdown-menu-end" style="width: 15rem;">
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-shopping-bag fs-base opacity-60 me-2"></i>
              Orders
              <span class="nav-indicator"></span>
              <span class="ms-auto fs-xs text-muted">2</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-dollar-sign fs-base opacity-60 me-2"></i>
              Sales
              <span class="ms-auto fs-xs text-muted">$735.00</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-message-square fs-base opacity-60 me-2"></i>
              Messages
              <span class="nav-indicator"></span>
              <span class="ms-auto fs-xs text-muted">1</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-users fs-base opacity-60 me-2"></i>
              Followers
              <span class="ms-auto fs-xs text-muted">146</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-star fs-base opacity-60 me-2"></i>
              Reviews
              <span class="ms-auto fs-xs text-muted">15</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-heart fs-base opacity-60 me-2"></i>
              Favorites
              <span class="ms-auto fs-xs text-muted">6</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="ai-log-out fs-base opacity-60 me-2"></i>
              Sign out
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse3">
      <!-- Site menu goes here. See example above -->
    </div>
  </div>
</header>

// Basic navbar: Button (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.me-0.pe-lg-2.me-lg-4
      img(src="path-to-desktop-logo", alt="Around", width="153").d-none.d-lg-block
      img(src="path-to-mobile-logo", alt="Around", width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse1").navbar-toggler
        span.navbar-toggler-icon
      a(href="#").btn.btn-primary.d-none.d-sm-inline-block.ms-3
        | Sign up
    #navbarCollapse1.collapse.navbar-collapse.order-lg-2
      ul.navbar-nav.me-auto
        li.nav-item.active
          a(href="#").nav-link
            | Home
        li.nav-item
          a(href="#").nav-link
            | Link
        li.nav-item.dropdown
          a(href="#" data-bs-toggle="dropdown").nav-link.dropdown-toggle
            | Dropdown
          ul.dropdown-menu
            li
              a(href="#").dropdown-item
                | Action link
            li.dropdown
              a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
                | Dropdown
              ul.dropdown-menu
                li
                  a(href="#").dropdown-item
                    | Action link
                li
                  a(href="#").dropdown-item
                    | Another action
                li
                  a(href="#").dropdown-item
                    | Something else here
                li
                  a(href="#").dropdown-item
                    | Yet another link
            li
              a(href="#").dropdown-item
                | Another action
            li.dropdown-divider 
            li
              a(href="#").dropdown-item
                | Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
            | Disabled

// Basic navbar: Toolbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.me-0.pe-lg-2.me-lg-4
      img(src="path-to-desktop-logo", alt="Around", width="153").d-none.d-lg-block
      img(src="path-to-mobile-logo", alt="Around", width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse2").navbar-toggler
        span.navbar-toggler-icon
      .navbar-tool
        a(href="#").navbar-tool-icon-box.me-2
          i.ai-search
      .navbar-tool.d-none.d-sm-flex
        a(href="#").navbar-tool-icon-box.me-2
          i.ai-user
      div(style="height: 30px;").border-start.me-2
      .navbar-tool.me-2
        a(href="#").navbar-tool-icon-box
          i.ai-shopping-cart
          span.navbar-tool-badge 3
    #navbarCollapse2.collapse.navbar-collapse.order-lg-2
      // Site menu goes here. See example above

// Basic navbar: Logged in user (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.me-0.pe-lg-2.me-lg-4
      img(src="path-to-desktop-logo", alt="Around", width="153").d-none.d-lg-block
      img(src="path-to-mobile-logo", alt="Around", width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse3").navbar-toggler.me-2
        span.navbar-toggler-icon
      .navbar-tool.dropdown
        a(href="#").navbar-tool-icon-box
          img(src="path-to-image", alt="Avatar").navbar-tool-icon-box-img
        a(href="#").navbar-tool-label.dropdown-toggle
          small Hello,
          | Amanda
        ul(style="width: 15rem;").dropdown-menu.dropdown-menu-end
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-shopping-bag.fs-base.opacity-60.me-2
              | Orders
              span.nav-indicator
              span.ms-auto.fs-xs.text-muted 2
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-dollar-sign.fs-base.opacity-60.me-2
              | Sales
              span.ms-auto.fs-xs.text-muted $735.00
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-message-square.fs-base.opacity-60.me-2
              | Messages
              span.nav-indicator
              span.ms-auto.fs-xs.text-muted 1
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-users.fs-base.opacity-60.me-2
              | Followers
              span.ms-auto.fs-xs.text-muted 146
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-star.fs-base.opacity-60.me-2
              | Reviews
              span.ms-auto.fs-xs.text-muted 15
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-heart.fs-base.opacity-60.me-2
              | Favorites
              span.ms-auto.fs-xs.text-muted 6
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.ai-log-out.fs-base.opacity-60.me-2
              | Sign out
    #navbarCollapse3.collapse.navbar-collapse.order-lg-2
      // Site menu goes here. See example above

Color schemes

<!-- Dark navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

<!-- Primary navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

<!-- Gray navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-secondary">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

// Dark navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  .container.px-0.px-xl-3
    // ...

// Primary navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-primary
  .container.px-0.px-xl-3
    // ...

// Gray navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-secondary
  .container.px-0.px-xl-3
    // ...

Topbar

<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
  <div class="container d-md-flex align-items-center px-0 px-xl-3">
    <div class="d-none d-md-block text-nowrap me-3">
      <i class="ai-phone fs-base text-muted me-1"></i>
      <span class="text-muted me-2">Support</span>
      <a class="topbar-link me-1" href="tel:9107848015">910-784-8015</a>
    </div>
    <div class="d-flex text-end ms-auto">
      <a class="d-none d-sm-inline-block topbar-link pe-2 me-4" href="#">
        <i class="ai-map-pin fs-base opacity-60 me-1"></i>Track your order
      </a>
      <div class="dropdown ms-0 ms-sm-auto ms-md-0 me-3">
        <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>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="#">
            <img class="me-2" width="20" src="path-to-image" alt="Français"/>
            Français
          </a>
          <a class="dropdown-item" href="#">
            <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
            Deutsch
          </a>
          <a class="dropdown-item" href="#">
            <img class="mt-n1 me-2" width="20" src="path-to-image" alt="Italiano"/>
            Italiano
          </a>
        </div>
      </div>
      <div class="dropdown ms-auto ms-sm-0">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">$ Dollar (US)</a>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="#">€ Euro (EU)</a>
          <a class="dropdown-item" href="#">£ Pound (UK)</a>
          <a class="dropdown-item" href="#">¥ Yen (JP)</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
  <div class="container d-md-flex align-items-center px-0 px-xl-3">
    ...
  </div>
</div>

// Light topbar
.topbar.topbar-light.bg-secondary
  .container.d-md-flex.align-items-center.px-0.px-xl-3
    .d-none.d-md-block.text-nowrap.me-3
      i.ai-phone.fs-base.text-muted.me-1
      span.text-muted.me-2 Support
      a(href="tel:9107848015").topbar-link.me-1
        | 910-784-8015
    .d-flex.text-end.ms-auto
      a(href="#").d-none.d-sm-inline-block.topbar-link.pe-2.me-4
        i.ai-map-pin.fs-base.opacity-60.me-1
        | Track your order
      .dropdown.ms-0.ms-sm-auto.ms-md-0.me-3
        a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
          img(src="path-to-image", alt="English", width="20").me-2
          | Eng
        .dropdown-menu.dropdown-menu-end
          a(href="#").dropdown-item
            img(src="path-to-image", alt="Français", width="20").me-2
            | Français
          a(href="#").dropdown-item
            img(src="path-to-image", alt="Deutsch", width="20").me-2
            | Deutsch
          a(href="#").dropdown-item
            img(src="path-to-image", alt="Italiano", width="20").mt-n1.me-2
            | Italiano
      .dropdown.ms-auto.ms-sm-0
        a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
          | $ Dollar (US)
        .dropdown-menu.dropdown-menu-end
          a(href="#").dropdown-item
            | € Euro (EU)
          a(href="#").dropdown-item
            | £ Pound (UK)
          a(href="#").dropdown-item
            | ¥ Yen (JP)

// Dark topbar
.topbar.topbar-dark.bg-dark
  .container.d-md-flex.align-items-center.px-0.px-xl-3
    | ...

Topbar + Navbar

<!-- 2-level header: Topbar + Navbar -->
<header>

  <!-- Topbar -->
  <div class="topbar topbar-dark bg-dark">
    <div class="container d-md-flex align-items-center px-0 px-xl-3">
      ...
    </div>
  </div>

  <!-- Navbar -->
  <div class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
    <div class="container d-md-flex align-items-center px-0 px-xl-3">
      ...
    </div>
  </div>
</header>

// 2-level header: Topbar + Navbar
header

  // Topbar
  .topbar.topbar-dark.bg-dark
    .container.d-md-flex.align-items-center.px-0.px-xl-3
      | ...

  // Navbar
  .navbar.navbar-expand-lg.navbar-light.bg-light.navbar-shadow
    .container.d-md-flex.align-items-center.px-0.px-xl-3
      | ...