Navbar Vertical

Sample Markup

View Source 
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

Standard

  • Cheese
  • Spaghetti
  • Meatballs
View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="navbar-horizontal">
  <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>

Full Width

  • Cheese
  • Spaghetti
  • Meatballs
View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="navbar-horizontal navbar-horizontal--full-width">
  <ul class="navbar-horizontal__list">
    <li class="navbar-horizontal__element u-text-align-center">
      Cheese
    </li>
    <li class="navbar-horizontal__element u-text-align-center">
      Spaghetti
    </li>
    <li class="navbar-horizontal__element u-text-align-center">
      Meatballs
    </li>
  </ul>
</div>

Nav Tabs

SizeToppings
View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<nav-tabs><nav-tab-list navbar-horizontal-classes="navbar-horizontal--full-width"><nav-tab data-target="#nav_tabs_tab_1">Size</nav-tab><nav-tab data-target="#nav_tabs_tab_2">Toppings</nav-tab></nav-tab-list><nav-tab-pane id="nav_tabs_tab_1">
    <div class="u-padding-top-4">
      <div class="form-field">
        <input id="nav_tabs_size_1" name="nav_tabs_size" type="radio" /><label for="nav_tabs_size_1">14" </label>
      </div>
      <div class="form-field">
        <input id="nav_tabs_size_2" name="nav_tabs_size" type="radio" /><label for="nav_tabs_size_2">18" </label>
      </div>
    </div>
  </nav-tab-pane><nav-tab-pane id="nav_tabs_tab_2">
    <div class="u-padding-top-4">
      <div class="form-field">
        <input id="nav_tabs_topping_1" name="nav_tabs_topping" type="radio" /><label for="nav_tabs_topping_1">Cheese </label>
      </div>
      <div class="form-field">
        <input id="nav_tabs_topping_2" name="nav_tabs_topping" type="radio" /><label for="nav_tabs_topping_2">Sausage </label>
      </div>
      <div class="form-field">
        <input id="nav_tabs_topping_3" name="nav_tabs_topping" type="radio" /><label for="nav_tabs_topping_3">Pepperoni </label>
      </div>
    </div>
  </nav-tab-pane></nav-tabs>

Sample Usage

  • Stark
  • Lannister
  • Martell
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.
View Source 
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>