Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the Official Bootstrap Documentationfor a full list of instructions and other options.
Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the large breakpoint.
<nav class="navbar navbar-expand-lg bg-gray-100 bd"> <a class="navbar-brand tx-bold tx-spacing--2 order-1" href="#">LOGO</a> <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i data-feather="menu" class="wd-20 ht-20"></i> </button> <div class="collapse navbar-collapse order-2" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </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> <form class="form-inline mg-t-10 mg-lg-0"> <input class="form-control wd-150-f mg-r-5" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-primary" type="submit">Search</button> </form> </div></nav>The .navbar-brandcan be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a></nav>Navbar navigation links build on our nav options with their own modifier class and require the use of toggler classes for proper responsive styling.
<nav class="navbar navbar-expand-lg navbar-light bg-light bd"> <a class="navbar-brand tx-bold tx-spacing--2" href="#">LOGO</a> <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <i data-feather="menu" class="wd-20 ht-20"></i> </button> <div class="collapse navbar-collapse order-2" id="navbarNav"> <ul class="navbar-nav">...</ul> </div></nav>Place various form controls and components within a navbar.
<nav class="navbar navbar-light bg-light"> <form class="form-inline mg-l-auto"> <input class="form-control mg-r-5" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-primary" type="submit">Search</button> </form></nav>Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.
<nav class="navbar navbar-light bg-light"> <span class="navbar-text"> Navbar text with an inline element </span></nav><nav class="navbar navbar-expand-lg navbar-dark bg-dark">...</nav><nav class="navbar navbar-expand-lg navbar-dark bg-primary">...</nav>