<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li>
            <a>Menu Item 1</a>
        </li>
        <li>
            <a>Menu Item 2</a>
        </li>
        <li>
            <a>Menu Item 3</a>
        </li>
    </ul>
</nav>

Add the navbar-default class to the <nav> tag to create a styled navbar.

Also use navbar-nav to the <ul> tag to make the buttons go horizontally across the navbar, justified left.

Use class="active" in the <li></li> tag to indicate which tab is active.

Hover over the menu items to see the :hover pseudo-class in action.

<nav class="navbar">
              <ul class="nav nav-tabs">
                  <li class="active">
                      <a>Menu Item 1</a>
                  </li>
                  <li>
                      <a>Menu Item 2</a>
                  </li>
                  <li>
                      <a>Menu Item 3</a>
                  </li>
              </ul>
          </nav>

Use nav-tabs to the <ul> tag to make the buttons go horizontally across the navbar as tabs.

Use #[strong class="active"] in the <li></li> tag to indicate which tab is active.

You probably don't want to use navbar-default in the <nav> tag with this option. Tabs and a padded background-color don't look right together.

Hover over the menu items to see the :hover pseudo-class in action.

<nav class="navbar">
    <ul class="nav nav-pills">
        <li class="active">
            <a>Menu Item 1</a>
        </li>
        <li>
            <a>Menu Item 2</a>
        </li>
        <li>
            <a>Menu Item 3</a>
        </li>
    </ul>
</nav>

Use nav-pills to the <ul> tag to make the buttons go horizontally across the navbar as "pills."

Use class="active" in the <li></li> tag to indicate which tab is active.

You probably don't want to use navbar-default in the <nav> tag with this option. Pills and a padded background-color don't look right together.

Hover over the menu items to see the :hover pseudo-class in action.