###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Navs

##### Base Nav

Use base `.nav` class for building all types of navigation components. For light & Dark backgrounds use `.nav-light, .nav-dark` modifier classes. For alignments and vertical navigation please check official documentation.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

###### Nav light

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

###### Nav dark

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Tabs

Add the `.nav-tabs` modifier class to generate a tabbed interface.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Tabs active colors

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

Class | Values
--- | ---
`class="nav-tabs nav-tabs-[value]"` | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

##### Pills

Add the `.nav-pills` class to create a pilled navigation.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Pills active color

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

Class | Values
--- | ---
`class="nav-pills nav-pills-[value]"` | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

##### Pills Square

Add `.nav-pills-square` modifier class to create a square pills.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Pills Rounded

Add the `.nav-pills-rounded` modifier class to create a rounded pills.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Sizing

The `.nav-sm` modifier class is used to for smaller size navs.

- Active
- Link
- Link
- Disabled

##### Fill and Justify

###### Nav Fill

To proportionately fill all available space with your `.nav-items`, use `.nav-fill`.

- Active
- Link
- Link
- Disabled

###### Nav justified

For equal-width elements, use `.nav-justified`.

- Active
- Link
- Link
- Disabled

##### Nav with icon on left

Add `.link-icon-left` class along with `.nav-link`.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

##### Nav with icon on top

Add `.link-icon-top` class along with `.nav-link`.

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled

- Active
- Dropdown
  Action Another action Something else here
  Separated link
- Link
- Disabled