Tabs

Tabbed content panels with multiple variants.

Default (underline) tabs

Add na-tabs on the wrapper. Active tab and panel are controlled via the na-active class (toggled by JS on click).

Overview panel content.

Features panel content.

Pricing panel content.

Disabled tab - unreachable.

<div class="na-tabs" na-tabs>
  <div class="na-tabs-nav">
    <button class="na-tabs-tab na-active" data-tab="tab-overview">Overview</button>
    <button class="na-tabs-tab" data-tab="tab-features">Features</button>
    <button class="na-tabs-tab na-disabled">Disabled</button>
  </div>
  <div class="na-tabs-content">
    <div class="na-tabs-panel na-active" id="tab-overview">Overview content.</div>
    <div class="na-tabs-panel" id="tab-features">Features content.</div>
  </div>
</div>

Pills style

All items.

Published items.

Draft items.

<div class="na-tabs na-tabs-pills" na-tabs>
  ...
</div>

Boxed style

Info panel.

Settings panel.

Logs panel.

<div class="na-tabs na-tabs-boxed" na-tabs>
  ...
</div>

Vertical tabs

General settings.

Security settings.

Billing settings.

<div class="na-tabs na-tabs-vertical" na-tabs>
  ...
</div>

Class reference

Class / Attribute	Description
`na-tabs`	Wrapper element
`na-tabs-pills`	Pill-shaped tab buttons
`na-tabs-boxed`	Bordered boxed tabs
`na-tabs-vertical`	Sidebar-style vertical tabs
`na-tabs-nav`	Tab button row
`na-tabs-tab`	Individual tab button
`na-tabs-content`	Panel container
`na-tabs-panel`	Individual content panel
`na-active`	Shows the active tab/panel
`na-disabled`	Prevents tab activation
`data-tab="panel-id"`	Links button to its panel by id