###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Navbar

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.

##### Brand

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

##### 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.

##### Forms

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

##### Text

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.

##### Container

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.

##### Togglers

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.

###### Toggle on left

##### 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!

##### Collapsed content

Toggleable via the navbar brand.