Navbar

Ready-to-use navbar for your project

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on Collapse JavaScript plugin.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.
  • Add an optional .navbar-scroll to set a max-height and scroll expanded navbar content.

Example

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Custom

Here's custom navbar implemented in our template which has multi-level dropdown, dark version and big dropdown

Custom navbar with light version
On this page