angular-state-router/example/common/navigation.html

An AngularJS state-based router designed for flexibility and ease of use.

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/" sref="landing">Demo</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ng-class="{'active': $state.active('about') }"><a href="#/about" sref="about">About</a></li>
        <li ng-class="{'active': $state.active('products') }"><a href="#/products" sref="products">Products</a></li>
        <li ng-class="{'active': $state.active('contact') }"><a href="#/contact" sref="contact">Contact</a></li>
        <li ng-class="{'active': $state.active('search') }"><a href="#/search" sref="search">Search</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li ng-if="!isAuthenticated"><a href="#/login" sref="account.login">Login</a></li>

        <li ng-if="isAuthenticated" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Lorem Ipsum <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#/account">Account</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#/logout" sref="account.logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>