## Navs

Documentation and examples of how to use Bootstrap’s included navigation components.

Navs on Bootstrap

#### Horizontal

    <ul class="nav">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</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 disabled">Disabled</a></li>
    </ul>

#### Vertical

    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</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 disabled">Disabled</a></li>
    </ul>

#### Pills

    <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</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 disabled">Disabled</a></li>
    </ul>

#### Fill and justify

    <ul class="nav nav-pills nav-fill mb-4">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
    </ul>
    <ul class="nav nav-pills nav-justified">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
    </ul>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize