Tab

Tabbed interfaces built on Bootstrap’s nav styles, with the WAI-ARIA tabs keyboard pattern.

Bootstrap’s tab docs describe the markup and CSS.

Example

Give each bsTab and bsTabPane the same key, and pass the tab list to bsTabContent. Ids, aria-controls, aria-labelledby and aria-selected are set for you. Arrow keys, Home and End move between tabs and skip disabled ones.

This is the Home tab’s content.

This is the Profile tab’s content.

This is the Contact tab’s content.

This is the Disabled tab’s content.

HTML

<nav bsTabs #tabs="bsTabs" class="nav-tabs mb-3" aria-label="Account sections">
  <button type="button" bsTab="home">Home</button>
  <button type="button" bsTab="profile">Profile</button>
  <button type="button" bsTab="contact">Contact</button>
  <button type="button" bsTab="disabled" disabled>Disabled</button>
</nav>
<div [bsTabContent]="tabs">
  <div bsTabPane="home">
    <p>This is the <strong>Home</strong> tab’s content.</p>
  </div>
  <div bsTabPane="profile">
    <p>This is the <strong>Profile</strong> tab’s content.</p>
  </div>
  <div bsTabPane="contact">
    <p>This is the <strong>Contact</strong> tab’s content.</p>
  </div>
  <div bsTabPane="disabled">
    <p>This is the <strong>Disabled</strong> tab’s content.</p>
  </div>
</div>

Vertical pills

Add nav-pills or nav-underline for other styles. Set vertical on a vertical list so screen readers announce its orientation.

General settings.

Security settings.

Billing settings.

HTML

<div class="d-flex align-items-start gap-4">
  <div bsTabs #tabs="bsTabs" class="nav-pills nav-pills-vertical" vertical aria-label="Settings">
    <button type="button" bsTab="general">General</button>
    <button type="button" bsTab="security">Security</button>
    <button type="button" bsTab="billing">Billing</button>
  </div>
  <div [bsTabContent]="tabs">
    <div bsTabPane="general"><p>General settings.</p></div>
    <div bsTabPane="security"><p>Security settings.</p></div>
    <div bsTabPane="billing"><p>Billing settings.</p></div>
  </div>
</div>

Two-way binding

Bind [(active)] to the key of the shown tab. Without it the first enabled tab is shown.

Fill in your details.

Choose a plan.

Confirm and pay.

Active tab: one

<nav bsTabs #tabs="bsTabs" class="nav-underline mb-3" [(active)]="active" aria-label="Steps">
  <button type="button" bsTab="one">Step one</button>
  <button type="button" bsTab="two">Step two</button>
  <button type="button" bsTab="three">Step three</button>
</nav>
<div [bsTabContent]="tabs">
  <div bsTabPane="one"><p>Fill in your details.</p></div>
  <div bsTabPane="two"><p>Choose a plan.</p></div>
  <div bsTabPane="three"><p>Confirm and pay.</p></div>
</div>
<p>
  Active tab: <code>{{ active() }}</code>
</p>
<button type="button" bsButton variant="outline" theme="secondary" (click)="active.set('three')">
  Jump to step three
</button>

API

BsTabs

Selector: [bsTabs] · Exported as: bsTabs

Inputs

Name	Type	Default	Description
`active`	`string \| undefined`	`undefined`	Key of the shown tab. Supports [(active)].
`vertical`	`boolean`	`false`	Sets aria-orientation="vertical".
`id`	`string`	`generated`	Element id, used to build tab and pane ids.

Methods

Name	Type	Description
`select(key)`	`void`	Shows the tab with the given key.
`selected`	`Signal<string \| undefined>`	Key of the shown tab.

BsTab

Selector: [bsTab] · Exported as: bsTab

Inputs

Name	Type	Default	Description
`bsTab`	`string`	`required`	Key of the tab.
`disabled`	`boolean`	`false`	Disables the tab (disabled on buttons, aria-disabled and .disabled on links). A disabled active tab falls back to the first enabled tab.

BsTabContent

Selector: [bsTabContent] · Exported as: bsTabContent

Inputs

Name	Type	Default	Description
`bsTabContent`	`BsTabs`	`required`	The tab list whose panes this element holds.
`animation`	`boolean`	`true`	Fades panes in.

BsTabPane

Selector: [bsTabPane] · Exported as: bsTabPane

Inputs

Name	Type	Default	Description
`bsTabPane`	`string`	`required`	Key of the tab that shows this pane.