Loading...
Around UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Navbar

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

Bootstrap docs

Supported content

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

<!-- Menu with dropdown + Button -->
<header class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <span class="text-primary flex-shrink-0 me-2">
        <svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
        </svg>
      </span>
      Around
    </a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <nav class="collapse navbar-collapse" id="navbarCollapse1">
      <ul class="navbar-nav me-auto">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Action link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#" class="dropdown-item">Action link</a></li>
                <li><a href="#" class="dropdown-item">Another action</a></li>
                <li><a href="#" class="dropdown-item">Something else here</a></li>
                <li><a href="#" class="dropdown-item">Yet another link</a></li>
              </ul>
            </li>
            <li><a href="#" class="dropdown-item">Another action</a></li>
            <li class="dropdown-divider"> </li>
            <li href="#"><a class="dropdown-item">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <a href="#" class="btn btn-primary btn-sm fs-sm ms-3 mb-4 mb-lg-0">
        <i class="ai-user me-2 ms-n1"></i>
        Sign up
      </a>
    </nav>
  </div>
</header>

<!-- Menu + Theme mode switch + Button -->
<header class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <span class="text-primary flex-shrink-0 me-2">
        <svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
        </svg>
      </span>
      Around
    </a>
    <div class="form-check form-switch mode-switch order-lg-2 me-3 me-lg-4 ms-auto" data-bs-toggle="mode">
      <input type="checkbox" class="form-check-input" id="theme-mode">
      <label for="theme-mode" class="form-check-label">
        <i class="ai-sun fs-lg"></i>
      </label>
      <label for="theme-mode" class="form-check-label">
        <i class="ai-moon fs-lg"></i>
      </label>
    </div>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a href="#" class="btn btn-outline-primary btn-sm fs-sm order-lg-3 d-none d-lg-inline-flex">
      <i class="ai-login me-2 ms-n1"></i>
      Sign in
    </a>
    <nav class="collapse navbar-collapse" id="navbarCollapse2">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
      </ul>
      <a href="#" class="btn btn-outline-primary btn-sm fs-sm d-lg-none ms-3 mb-4 mb-lg-0">
        <i class="ai-login me-2 ms-n1"></i>
        Sign in
      </a>
    </nav>
  </div>
</header>

<!-- Menu + Search + Account + Shopping cart -->
<header class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <span class="text-primary flex-shrink-0 me-2">
        <svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
        </svg>
      </span>
      Around
    </a>
    <div class="nav align-items-center order-lg-2 ms-auto">
      <a href="#" class="nav-link fs-4 p-2 mx-sm-1" aria-label="Search">
        <i class="ai-search"></i>
      </a>
      <a href="#" class="nav-link fs-4 p-2 mx-sm-1" aria-label="Account">
        <i class="ai-user"></i>
      </a>
      <a href="#" class="nav-link position-relative fs-4 p-2" aria-label="Cart">
        <i class="ai-cart"></i>
        <span class="badge bg-primary fs-xs position-absolute end-0 top-0 me-n1" style="padding: .25rem .375rem;">3</span>
      </a>
      <button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse" id="navbarCollapse3">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contacts</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<!-- Menu + Contact (Phone / Email) links -->
<header class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <span class="text-primary flex-shrink-0 me-2">
        <svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
        </svg>
      </span>
      Around
    </a>
    <div class="d-flex align-items-center order-lg-2 ms-auto">
      <a href="tel:4055550128" class="d-flex align-items-center text-decoration-none">
        <i class="ai-phone fs-3"></i>
        <div class="text-nowrap ps-2 d-none d-lg-block">
          <h6 class="fs-sm lh-1 mb-0">Call&nbsp;us</h6>
          <span class="text-body fs-xs">(405)&nbsp;555&#8209;0128</span>
        </div>
      </a>
      <a href="mailto:hello@example.com" class="d-flex align-items-center text-decoration-none ms-4">
        <i class="ai-messages fs-3"></i>
        <div class="text-nowrap ps-2 d-none d-lg-block">
          <h6 class="fs-sm lh-1 mb-0">Chat with us</h6>
          <span class="text-body fs-xs">hello@example.com</span>
        </div>
      </a>
    </div>
    <button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <nav class="collapse navbar-collapse" id="navbarCollapse4">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<!-- User logged in state. User account dropdown -->
<header class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <span class="text-primary flex-shrink-0 me-2">
        <svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
        </svg>
      </span>
      Around
    </a>
    <div class="dropdown nav d-block order-lg-2 ms-auto">
      <a href="#" class="nav-link d-flex align-items-center p-0" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="assets/img/avatar/01.jpg" class="border rounded-circle" width="48" alt="Isabella Bocouse">
        <div class="d-none d-sm-block ps-2">
          <div class="fs-xs lh-1 opacity-60">Hello,</div>
          <div class="fs-sm dropdown-toggle">Isabella</div>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-end my-1">
        <h6 class="dropdown-header fs-xs fw-medium text-body-secondary text-uppercase pb-1">Account</h6>
        <a href="#" class="dropdown-item">
          <i class="ai-user-check fs-lg opacity-70 me-2"></i>
          Overview
        </a>
        <a href="#" class="dropdown-item">
          <i class="ai-settings fs-lg opacity-70 me-2"></i>
          Settings
        </a>
        <a href="#" class="dropdown-item">
          <i class="ai-wallet fs-base opacity-70 me-2 mt-n1"></i>
          Billing
        </a>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header fs-xs fw-medium text-body-secondary text-uppercase pb-1">Dashboard</h6>
        <a href="#" class="dropdown-item">
          <i class="ai-cart fs-lg opacity-70 me-2"></i>
          Orders
        </a>
        <a href="#" class="dropdown-item">
          <i class="ai-activity fs-lg opacity-70 me-2"></i>
          Earnings
        </a>
        <a href="#" class="dropdown-item d-flex align-items-center">
          <i class="ai-messages fs-lg opacity-70 me-2"></i>
          Chat
          <span class="badge bg-danger ms-auto">4</span>
        </a>
        <a href="#" class="dropdown-item">
          <i class="ai-heart fs-lg opacity-70 me-2"></i>
          Favorites
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">
          <i class="ai-logout fs-lg opacity-70 me-2"></i>
          Sign out
        </a>
      </div>
    </div>
    <button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse5" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <nav class="collapse navbar-collapse" id="navbarCollapse5">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contacts</a>
        </li>
      </ul>
    </nav>
  </div>
</header>