Choose your preferred layout


Menu comes in two modes: dark & light

Top Nav

Choose your liked color mode

Scrollable Header
brand brand



Navbars come with built-in support for a handful of sub-components. Here’s an example of all the sub-components included in a responsive light-themed navbar.


Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size.


Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling.


Place various form controls and components within a navbar with .form-inline.


Navbars may contain bits of text with the help of .navbar-text.

Color schemes

Theming the navbar using theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.


Wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.


Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.

External Content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. It works on the id and data-target matching, that’s easily done!