Navbar Vertical

Sample Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="navbar-vertical">
  <ul class="navbar-vertical__list list-unstyled">
    <li class="navbar-vertical__element">
      <a class="navbar-vertical__element-link" href="#">Cheese</a>
    </li>
    <li class="navbar-vertical__element navbar-vertical__element--active">
      <a class="navbar-vertical__element-link" href="#">Spaghetti</a>
    </li>
    <li class="navbar-vertical__element">
      <a class="navbar-vertical__element-link" href="#">Meatballs</a>
    </li>
  </ul>
</div>

Navbar Horizontal

Sample Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="navbar-horizontal">
  <div class="navbar-container">
    <ul class="navbar-horizontal__list">
      <li class="navbar-horizontal__element">
        Cheese
      </li>
      <li class="navbar-horizontal__element">
        Spaghetti
      </li>
      <li class="navbar-horizontal__element">
        Meatballs
      </li>
    </ul>
  </div>
</div>

Sample Usage

House Stark of Winterfell is one of the Great Houses of Westeros and the principal noble house of the north; many lesser houses are sworn to them. In days of old they ruled as Kings of Winter, but since the Wars of Conquest by House Targaryen they have been Wardens of the North. Their seat, Winterfell, is an ancient castle renowned for its strength.
House Lannister of Casterly Rock is one of the Great Houses of Seven Kingdoms, and the principal house of the westerlands. Their seat is Casterly Rock, though another branch exists that is based in nearby Lannisport. Their sigil is a golden lion on a field of crimson. Their official motto is "Hear Me Roar!" However, their unofficial motto, equally well known, is "A Lannister always pays his debts." The Warden of the West is a Lannister by tradition.
House Nymeros Martell of Sunspear is one of the Great Houses of Westeros and is the ruling house of Dorne. 'Nymeros' indicates "of the line of Nymeria," but generally it is simply called House Martell. The seat of the Prince of Dorne is Sunspear in southeastern Dorne.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="navbar-horizontal" ng-init="active = 1">
  <div class="navbar-container">
    <ul class="navbar-horizontal__list">
      <li class="navbar-horizontal__element" ng-class="{ 'navbar-horizontal__element--active': active == 1 }" ng-click="active = 1">
        Stark
      </li>
      <li class="navbar-horizontal__element" ng-class="{ 'navbar-horizontal__element--active': active == 2 }" ng-click="active = 2">
        Lannister
      </li>
      <li class="navbar-horizontal__element" ng-class="{ 'navbar-horizontal__element--active': active == 3 }" ng-click="active = 3">
        Martell
      </li>
    </ul>
  </div>
</div>
<div class="u-space-top-4">
  <div ng-show="active == 1">
    House Stark of Winterfell is one of the Great Houses of Westeros and the principal noble house of the north; many lesser houses are sworn to them. In days of old they ruled as Kings of Winter, but since the Wars of Conquest by House Targaryen they have been Wardens of the North. Their seat, Winterfell, is an ancient castle renowned for its strength.
  </div>
  <div ng-show="active == 2">
    House Lannister of Casterly Rock is one of the Great Houses of Seven Kingdoms, and the principal house of the westerlands. Their seat is Casterly Rock, though another branch exists that is based in nearby Lannisport. Their sigil is a golden lion on a field of crimson. Their official motto is "Hear Me Roar!" However, their unofficial motto, equally well known, is "A Lannister always pays his debts." The Warden of the West is a Lannister by tradition.
  </div>
  <div ng-show="active == 3">
    House Nymeros Martell of Sunspear is one of the Great Houses of Westeros and is the ruling house of Dorne. 'Nymeros' indicates "of the line of Nymeria," but generally it is simply called House Martell. The seat of the Prince of Dorne is Sunspear in southeastern Dorne.
  </div>
</div>