Skip to main content
bootstrap-ng

Search the docs

Navbar

A responsive navigation header. Below its breakpoint the navigation collapses into a drawer opened by the toggler.

Bootstrap’s navbar docs describe the markup and CSS.

Example

Put a bsDrawer inside a .navbar with a responsive .md:navbar-expand class, and open it with a .navbar-toggler that has bsDrawerToggle. From the breakpoint up, the navbar shows the drawer’s content inline and hides the toggler. The drawer closes when the navbar expands.

HTML
<nav class="navbar md:navbar-expand bg-1" aria-label="Example">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button
      type="button"
      class="btn-icon navbar-toggler"
      aria-label="Toggle navigation"
      [bsDrawerToggle]="navDrawer">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog bsDrawer #navDrawer="bsDrawer" placement="end" aria-labelledby="navbar-drawer-title">
      <div class="drawer-header">
        <h2 class="drawer-title h5" id="navbar-drawer-title">Menu</h2>
        <button type="button" bsCloseButton bsDrawerClose></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

Navbars can hold menus, forms and buttons. This one expands from the lg breakpoint.

HTML
<nav class="navbar lg:navbar-expand bg-1" aria-label="Shop">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Shop</a>
    <button
      type="button"
      class="btn-icon navbar-toggler"
      aria-label="Toggle navigation"
      [bsDrawerToggle]="shopDrawer">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog bsDrawer #shopDrawer="bsDrawer" placement="end" aria-labelledby="shop-drawer-title">
      <div class="drawer-header">
        <h2 class="drawer-title h5" id="shop-drawer-title">Shop</h2>
        <button type="button" bsCloseButton bsDrawerClose></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <button type="button" class="nav-link" [bsMenuToggle]="categories">Categories</button>
            <div bsMenu #categories="bsMenu">
              <a class="menu-item" href="#">Books</a>
              <a class="menu-item" href="#">Music</a>
              <a class="menu-item" href="#">Games</a>
            </div>
          </li>
        </ul>
        <form class="d-flex gap-2" role="search" (submit)="$event.preventDefault()">
          <label class="visually-hidden" for="navbar-search">Search</label>
          <input class="form-control" id="navbar-search" type="search" placeholder="Search" />
          <button type="submit" bsButton="outline" theme="success">Search</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

API

BsDrawer

Selector: dialog[bsDrawer] · Exported as: bsDrawer

Inputs

NameTypeDefaultDescription
placement'start' | 'end' | 'top' | 'bottom' | 'fullscreen''start'Edge the drawer slides in from below the navbar breakpoint. See the drawer page for every input.

BsDrawerToggle

Selector: [bsDrawerToggle]

Inputs

NameTypeDefaultDescription
bsDrawerToggleBsDrawerrequiredThe drawer to open and close.