WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Navigation Bar


Navigation Bars

If you want to create a simple horizontal navigation bar, you can add a .nav class on the
    element, a .nav-item class on each
  • option, and a .nav-link class on each link:

    A standard navigation bar is made with <nav class="navbar navbar-default">.

    The below this code will helphow to add a navigation bar to the top of the page:

    Example

    <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">No1</a></li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
      </div>
    </nav>
    ...
    Try it Yourself »

    Inverted Navigation Bar

    you do not change style of the default navigation bar, Bootstrap provides an alternative, black navbar:

    You change the .navbar-default class into .navbar-inverse:

    Example

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">No1</a></li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
      </div>
    </nav>
    Try it Yourself »

    Fixed Navigation Bar

    The navigation bar can also be fixed at the top or at the bottom of the page.

    A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

    The .navbar-fixed-top class makes the navigation bar fixed at the top:

    Example

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">No1</a></li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
      </div>
    </nav>
    Try it Yourself »

    The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:

    Example

    <nav class="navbar navbar-inverse navbar-fixed-bottom">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">No1</a></li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
      </div>
    </nav>
    Try it Yourself »

    Navigation Bar With Dropdown

    Navigation bars can also hold dropdown menus.

    Below example adds a dropdown menu for the "No1" button:

    Example

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
      </div>
    </nav>
    Try it Yourself »

    Right-Aligned Navigation Bar

    The .navbar-right class is used to right-align navigation bar buttons.

    Below this code we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:

    Example

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">No1</a></li>
          <li><a href="#">No2</a></li>
          <li><a href="#">No3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </nav>
    Try it Yourself »

    Collapsing The Navigation Bar

    The navigation bar takes up too much space on a small screen.

    We should hide the navigation bar; and only show it when it is needed.

    Example

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">No1</a></li>
            <li><a href="#">No2</a></li>
            <li><a href="#">No3</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>
    Try it Yourself »