Tabs

The Tabs components switch between peer views inside one context. Use ngs-tab-group with ngs-tab for local content tabs, or ngs-tab-nav-bar with a[ngs-tab-link] and ngs-tab-nav-panel for route-linked tabs inside one section.

Key Features:

Peer views: Switch between related sections such as overview, activity, files, and settings.
Custom labels: Use simple text or label templates with icons and richer header content.
Navigation support: Use tab nav links for route-linked subsections, not primary app navigation.
Overflow and motion: Supports disabled tabs, pagination controls, header placement, and animations.

The NgStarter Angular Tabs component lets you switch between peer views inside one page or section context, with only one panel visible at a time. Use ngs-tab-group with ngs-tab for local content tabs that do not require routing. It includes examples for Basic Tabs, Tabs with aligned labels, Tabs with custom label template, and Tabs with the headers on the bottom.

Basic Tabs

Use basic tabs when related peer views share one page context and only one panel should be visible at a time.

First

Second

Third

Content 1

Tabs with aligned labels

Align or stretch tab labels to match the density and available width of the surrounding page section.

First

Second

Third

Content 1

First

Second

Third

Content 1

First

Second

Third

Content 1

Tabs with custom label template

Use label templates when a tab header needs icons, badges, counters, or other compact metadata.

First

Second

Third

Content 1

Tabs with the headers on the bottom

Place headers below the content only when the content should stay visually first and tab controls act like a footer.

First

Second

Third

Content 1

Paginated Tabs

Pagination controls appear when there are more tabs than fit in the available horizontal space.

Tab 0

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

Tab 7

Tab 8

Tab 9

Tab 10

Tab 11

Tab 12

Tab 13

Tab 14

Tab 15

Tab 16

Tab 17

Tab 18

Tab 19

Tab 20

Tab 21

Tab 22

Tab 23

Tab 24

Tab 25

Tab 26

Tab 27

Tab 28

Tab 29

Content

Sortable Tabs

Combine tabs with CDK drag-and-drop only when users need to reorder peer views such as workspace pages or open documents.

One

Two

Three

Four

Five

Content for One

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo labore sapiente cum alias nobis!

Tabs with custom animations

Customize animations when the product needs a specific transition between tab panels.

Tab 1

Tab 2

Content for Tab 1 with custom animations.