Bootstrap 4 Navbars and Dropdowns Tweet

Bootstrap dropdowns togglable overlay contents for displaying list of links or texts. Moslty used in navigations for additional menu items, dropdowns can be added to buttons as well.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown Button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>
  </div>
</div>

Result

Split Button Dropdown

You can also split the button and the dropdown easily with bootstrap. You can also add headers and dividers in a dropdown menu. You can also add class active or disabled to the links inside a dropdown.

<div class="btn-group">
  <button class="btn btn-danger">Split Dropdown Button</button>
  <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
  	<h6 class="dropdown-header">Dropdown Header</h6>
    <a class="dropdown-item active" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Dropdown Item</a>
  </div>
</div>

Dropdown Direction

Dropdowns can also be displayed on any direction from the toggling element by adding class dropup, dropright or dropleft to the parent container.

<div class="btn-group dropup">
  <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Dropdown Direction Defined</button>
  <div class="dropdown-menu">  	
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>    
    <a class="dropdown-item" href="#">Dropdown Item</a>
  </div>
</div>

Dropdown Alignment

Dropdowns can be aligned to the left or right of the parent element using class dropdown-menu-left or dropdown-menu-right. You can also add responsive variants to align it on different sides on different viewport sizes.

<div class="btn-group">
  <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Drodown Alignment Defined</button>
  <div class="dropdown-menu dropdown-menu-right">  	
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>    
    <a class="dropdown-item" href="#">Dropdown Item</a>
  </div>
</div>

Dropdown Offset

You can also add data-offset(x,y) attribute to the dropdown toggle element to define the placement of the dropdown from the togglable element.

<div class="btn-group">
  <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="20,50">Data Offset Defined</button>
  <div class="dropdown-menu">  	
    <a class="dropdown-item" href="#">Dropdown Item</a>
    <a class="dropdown-item" href="#">Dropdown Item</a>    
    <a class="dropdown-item" href="#">Dropdown Item</a>
  </div>
</div>

Navbar

Bootstrap 4 offers a responsive and powerful navigation header called navbar. It supports navigation elements along with dropdowns, forms, texts, buttons and brand name within the navbar.

• Add a <nav> element with class navbar for display, position and padding properties. Add class navbar-expand-* to the <nav> define the screen size from where the navbar should show up by default. In smaller screens the navbar will be hidden and a button to toggle the navigation items will appear. Add class navbar-light bg-light for darker text with lighter background or navbar-dark bg-dark for lighter texts with darker background to the <nav> element. Replace the class for background with contextual background classes or your own custom class.
• Add an element, generally an anchor tag to display the name or logo of the website with class navbar-brand. You can opt to diplay it on smaller screens only too.
• Add a button with class navbar-toggler with attribute data-toggle="collapse" and data-target="". Add the id you gave to the collapse container which wraps the navigation items.
• Add an element with class navbar-toggler-icon to add icon to toggle the navbar.
• Add a container div with class collpase navbar-collapse and give an id which is needed to be added as value to data-target attribute on the navbar-toggler button. This will force the navbar to be hidden on screen sizes smaller than the one defined in the navbar-expand.
• Add a <ul> element inside the collapse container and add nav items inside it.

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand d-md-none" href="#">Navbar</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#exampleNav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="exampleNav">
    <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-toggle="dropdown">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Dropdown Item</a>
          <a class="dropdown-item" href="#">Dropdown Item</a>
          <a class="dropdown-item" href="#">Dropdown Item</a>
          <a class="dropdown-item" href="#">Dropdown Item</a>
        </div>
      </li> 
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>            
    </ul>    
  </div>
</nav>

Result

Navbar Forms

Forms can also be added to a navbar using class form-inline after the <ul> element.

<nav class="navbar navbar-expand-md navbar-light bg-primary">
  <a class="navbar-brand d-md-none" href="#">Navbar</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#exampleNav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="exampleNav">
    <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"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>            
    </ul> 
    <form class="form-inline ml-auto">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-warning my-2 my-sm-0" type="submit">Search</button>
    </form>    
  </div>
</nav>

Result

Centered Navbar

Wrap the <nav> element by a container or place a container class inside a nav for centered navbar.

Navbar Position

Beside the default navbar, you can also create a navbar fixed on top or fixed on bottom. You can also create a sticky on top navbar which scrolls as other contents do but changes its positioning to fixed once it reaches the top edge of the browser. All you need to do is add a positioning class from below to the <nav> element.

// Fixed Top	
<nav class="navbar fixed-top navbar-light bg-light"></nav>
// Fixed bottom
<nav class="navbar fixed-bottom navbar-light bg-light"></nav>
//Sticky top
<nav class="navbar sticky-top navbar-light bg-light"></nav>