Tabs

• Tab 1
• Tab 2
• Tab 3
• Tab 4 (Disabled)

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link" ng-class="{'active':tab === 'tab1'}" ng-click="tab='tab1'">Tab 1 (Active)</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" ng-class="{'active':tab === 'tab2'}" ng-click="tab='tab2'">Tab 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" ng-class="{'active':tab === 'tab3'}" ng-click="tab='tab3'">Tab 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" tabindex="-1" ng-click="tab='tab4'">Tab 4 (Disabled)</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" ng-class="{'show active':tab === 'tab1'}" ng-init="tab='tab1'" ng-show="tab === 'tab1'">Tab 1 content</div>
    <div class="tab-pane" ng-class="{'show active':tab ==='tab2'}" ng-show="tab === 'tab2'">Tab 2 content</div>
    <div class="tab-pane" ng-class="{'show active':tab ==='tab3'}" ng-show="tab === 'tab3'">Tab 3 content</div>
    <div class="tab-pane" ng-class="{'show active':tab ==='tab4'}" ng-show="tab === 'tab4'">Tab 4 content</div>
</div>

Tabs organize and allow navigation between sections of content that are on the same level of hierarchy and are related. They make it so users can better find different information.

Style

Tabs have equal importance with each other. You can have as many tabs as you need.

Placement

Page tabs are placed in the subheader area and are left aligned to the content area. Secondary tabs that go in the content area are also left aligned to the section they are over.

States

The active tab turns blue (#0078AC) and gets a 2px underline that extends 8px to the right and left of the tab name. Disabled tabs drop their opacity to 32%.