Navigation

Tabs

Switch between views, modes or filters. Three looks: segmented (equal items in a track), pills (content-width items for many categories) and line (an underline under the active tab). Pass an array of tabs, or build the list and the panels from parts.

Features14

API

Theming

Basic

An array of tabs and [(value)] — the value of the active tab. tabChange fires when the user picks another tab.

Overview

Traffic

Settings

Active: overview · changes: 0

Variants

variant: segmented (default) shares the width between the tabs, pills keeps each tab as wide as its text, line draws an underline under the active tab.

Day

Week

Month

Year

Day

Week

Month

Year

Day

Week

Month

Year

5 lines

<div class="column">  <tx-tabs variant="segmented" [tabs]="tabs" [(value)]="segmented" />  <tx-tabs variant="pills" [tabs]="tabs" [(value)]="pills" />  <tx-tabs variant="line" [tabs]="tabs" [(value)]="line" /></div>

Sizes

size="small" makes the segmented control compact — for toolbars and table headers.

Table

Cards

Chart

Table

Cards

Chart

Raised

raised puts the control on the card background with a ring and a soft shadow — for tabs placed straight on the page background.

All

Active

Paused

Archived

All

Active

Paused

Archived

Icons and counters

Each tab can have an icon, a badge counter (0 is shown) and a tooltip.

Inbox12

Starred3

Drafts0

Sent

Inbox12

Starred3

Drafts0

Sent

Inbox12

Starred3

Drafts0

Sent

5 lines

<div class="column">  <tx-tabs [tabs]="tabs" [(value)]="segmented" />  <tx-tabs variant="pills" [tabs]="tabs" [(value)]="pills" />  <tx-tabs variant="line" [tabs]="tabs" [(value)]="line" /></div>

Description

A tab's description is shown under the control while that tab is active — a short hint about the mode.

Automatic

Manual

Off

Renews every month until you cancel.

Vertical

orientation="vertical" stacks full-width tabs in a column — a settings menu beside the content. Up and Down move between them.

Name, photo and contact email.

16 lines

<div class="layout">  <tx-tabs class="menu" orientation="vertical" [tabs]="tabs" [(value)]="active" />  <div class="content">    @switch (active()) {      @case ('profile') {        Name, photo and contact email.      }      @case ('security') {        Password, sessions and two-factor sign-in.      }      @default {        Email and push notifications.      }    }  </div></div>

Panels

Build the list and the panels from parts: tx-tab-list with tx-tab, and tx-tab-panels with a tx-tab-panel per value. Tabs and panels are wired for screen readers by their value.

Summary

Members4

Activity

Three open tasks, one due this week.

18 lines

<tx-tabs variant="line" [(value)]="active">  <tx-tab-list ariaLabel="Project">    <tx-tab value="summary">Summary</tx-tab>    <tx-tab value="members" [badge]="4">Members</tx-tab>    <tx-tab value="activity">Activity</tx-tab>  </tx-tab-list>  <tx-tab-panels>    <tx-tab-panel value="summary">      <p class="text">Three open tasks, one due this week.</p>    </tx-tab-panel>    <tx-tab-panel value="members">      <p class="text">Four people can open this project.</p>    </tx-tab-panel>    <tx-tab-panel value="activity">      <p class="text">The last change was made two hours ago.</p>    </tx-tab-panel>  </tx-tab-panels></tx-tabs>

Scrollable

Tabs that do not fit scroll sideways and the active one scrolls into view. scrollable adds previous / next buttons at the edges; showNavigators hides them.

Report 1

Report 2

Report 3

Report 4

Report 5

Report 6

Report 7

Report 8

Report 9

Report 10

Report 11

Report 12

Report 13

Report 14

Report 15

Report 1

Report 2

Report 3

Report 4

Report 5

Report 6

Report 7

Report 8

Report 9

Report 10

Report 11

Report 12

Report 13

Report 14

Report 15

4 lines

<div class="column">  <tx-tabs class="tabs" variant="line" [scrollable]="true" [tabs]="tabs" [(value)]="line" />  <tx-tabs class="tabs" variant="pills" [scrollable]="true" [tabs]="tabs" [(value)]="pills" /></div>

Lazy

Content in an ng-template txTabPanelContent is created on the first visit and then kept. With lazy, only the active panel is rendered — the others are destroyed when you leave them.

Render only the active panel

Daily

Weekly

Monthly

Daily report, rendered at 11:32:38 PM.

20 lines

<div class="option">  <tx-toggle-switch inputId="tabs-lazy-only-active" [(ngModel)]="lazy" />  <tx-label for="tabs-lazy-only-active">Render only the active panel</tx-label></div><tx-tabs variant="line" [lazy]="lazy()" [(value)]="active">  <tx-tab-list ariaLabel="Reports">    @for (report of reports; track report) {      <tx-tab [value]="report">{{ report }}</tx-tab>    }  </tx-tab-list>  <tx-tab-panels>    @for (report of reports; track report) {      <tx-tab-panel [value]="report">        <ng-template txTabPanelContent>          <p class="text">{{ report }} report, rendered at {{ renderedAt() }}.</p>        </ng-template>      </tx-tab-panel>    }  </tx-tab-panels></tx-tabs>

Disabled

A disabled tab cannot be picked and the arrow keys skip it.

General

Billing

API keys

General

Billing

API keys

Links

a[txTab] makes a tab a link — with routerLink it navigates and selects the tab. Here each tab writes a query parameter.

Domains Records Certificates

Opened section: Domains

15 lines

<tx-tabs variant="line" [(value)]="active">  <tx-tab-list ariaLabel="Sections">    @for (section of sections; track section) {      <a        txTab        [value]="section"        [routerLink]="[]"        [queryParams]="{ section: section }"        queryParamsHandling="merge"        >{{ section }}</a      >    }  </tx-tab-list></tx-tabs><p class="status">Opened section: {{ active() }}</p>

Keyboard

Tab focuses the active tab, the arrow keys move between tabs and Enter or Space picks one. With selectOnFocus the arrow keys pick the tab at once.

List

Board

Calendar

List

Board

Calendar

Design tokens

dt changes one control — here a rounder track and a green active tab.

Monthly

Yearly

15 lines

<tx-tabs  class="tabs"  [tabs]="tabs"  [(value)]="active"  [dt]="{    segmented: {      borderRadius: '999px',      tab: {        borderRadius: '999px',        activeBackground: 'var(--tx-success-base)',        activeColor: 'var(--tx-success-contrast)',      },    },  }"/>