stable css 1.1.0 · js 1.0.0

Tabs

Switch between panels in place. A ng-tabs-nav of ng-tab buttons, each targeting a ng-tab-panel by id. Mounts itself — just link ng_tabs.js.

Each tab points to its panel with data-target="#id". Mark the initial tab and panel with is-active; the script keeps ARIA roles, keyboard arrows and visibility in sync.

Basic

The first panel is shown by default.

Switch tab to reveal this panel.

Each tab targets a panel by id.

tabs.html

<div class="ng-tabs">
    <div class="ng-tabs-nav">
        <button type="button" class="ng-tab is-active" data-target="#tb-basic-0">Overview</button>
        <button type="button" class="ng-tab" data-target="#tb-basic-1">Details</button>
        <button type="button" class="ng-tab" data-target="#tb-basic-2">Settings</button>
    </div>
    <div class="ng-tabs-content">
        <div class="ng-tab-panel is-active" id="tb-basic-0"><p>The first panel is shown by default.</p></div>
        <div class="ng-tab-panel" id="tb-basic-1"><p>Switch tab to reveal this panel.</p></div>
        <div class="ng-tab-panel" id="tb-basic-2"><p>Each tab targets a panel by id.</p></div>
    </div>
</div>

Pills

Add pills on the root for a filled, pill-shaped nav.

The first panel is shown by default.

Switch tab to reveal this panel.

Each tab targets a panel by id.

tabs.html

<div class="ng-tabs pills">
    <div class="ng-tabs-nav">
        <button type="button" class="ng-tab is-active" data-target="#tb-pills-0">Overview</button>
        <button type="button" class="ng-tab" data-target="#tb-pills-1">Details</button>
        <button type="button" class="ng-tab" data-target="#tb-pills-2">Settings</button>
    </div>
    <div class="ng-tabs-content">
        <div class="ng-tab-panel is-active" id="tb-pills-0"><p>The first panel is shown by default.</p></div>
        <div class="ng-tab-panel" id="tb-pills-1"><p>Switch tab to reveal this panel.</p></div>
        <div class="ng-tab-panel" id="tb-pills-2"><p>Each tab targets a panel by id.</p></div>
    </div>
</div>

Vertical

Add vertical to stack the nav beside the panels.

The first panel is shown by default.

Switch tab to reveal this panel.

Each tab targets a panel by id.

tabs.html

<div class="ng-tabs vertical">
    <div class="ng-tabs-nav">
        <button type="button" class="ng-tab is-active" data-target="#tb-vert-0">Overview</button>
        <button type="button" class="ng-tab" data-target="#tb-vert-1">Details</button>
        <button type="button" class="ng-tab" data-target="#tb-vert-2">Settings</button>
    </div>
    <div class="ng-tabs-content">
        <div class="ng-tab-panel is-active" id="tb-vert-0"><p>The first panel is shown by default.</p></div>
        <div class="ng-tab-panel" id="tb-vert-1"><p>Switch tab to reveal this panel.</p></div>
        <div class="ng-tab-panel" id="tb-vert-2"><p>Each tab targets a panel by id.</p></div>
    </div>
</div>

Disabled tab

Mark a tab is-disabled to skip it.

This tab is selectable.

Hidden — the tab cannot be focused.

Back to a normal tab.

tabs.html

<div class="ng-tabs">
    <div class="ng-tabs-nav">
        <button type="button" class="ng-tab is-active" data-target="#tb-dis-0">Active</button>
        <button type="button" class="ng-tab is-disabled" data-target="#tb-dis-1">Disabled</button>
        <button type="button" class="ng-tab" data-target="#tb-dis-2">Another</button>
    </div>
    <div class="ng-tabs-content">
        <div class="ng-tab-panel is-active" id="tb-dis-0"><p>This tab is selectable.</p></div>
        <div class="ng-tab-panel" id="tb-dis-1"><p>Hidden — the tab cannot be focused.</p></div>
        <div class="ng-tab-panel" id="tb-dis-2"><p>Back to a normal tab.</p></div>
    </div>
</div>

Anatomy

ng-tabs ng-tabs-nav ng-tab ng-tab-panel data-target="#id"

Variants & nav modifiers

ng-tabs classic ng-tabs pills ng-tabs vertical ng-tabs-nav spread ng-tabs-nav right

States

is-active is-disabled

Reference

Generated from the component source (_ng_tabs.scss · ng_tabs.js).

Component info

Name	`tabs`
Type	`css+js`
Version	`css 1.1.0 · js 1.0.0`
Status	`stable`
CSS	`/assets/css/components/_ng_tabs.scss`
JS	`/assets/js/ng_tabs.js`

Classes

.ng-dropdown .ng-dropdown-trigger .ng-tab .ng-tab-panel .ng-tabs .ng-tabs-content .ng-tabs-group-right .ng-tabs-nav

Tokens

--ng-tab-bg-active --ng-tab-bg-hover --ng-tab-border-active --ng-tab-color --ng-tab-color-active --ng-tab-color-hover --ng-tab-font-size --ng-tab-font-weight --ng-tab-font-weight-active --ng-tab-nav-line-height --ng-tab-padding-x --ng-tab-padding-y --ng-tab-panel-padding-x --ng-tab-panel-padding-y --ng-tab-panel-scroll-border --ng-tab-pill-bg --ng-tab-pill-bg-active --ng-tab-pill-bg-hover --ng-tab-pill-color-active --ng-tab-transition --ng-tab-underline-color --ng-tab-underline-height --ng-tabs-nav-border --ng-tabs-nav-gap --ng-tabs-nav-pad-x --ng-tabs-vertical-border