📄 primeng/tabs

File: tabs.md | Updated: 11/15/2025

Source: https://primeng.org/tabs

Primary

Surface

PresetsAuraMaterialLaraNora

Ripple

RTL
v20
- v20
- v19
- v18
- v17
FEATURES
API
THEMING
PASSTHROUGH

Tabs

Tabs is a container component to group content with tabs.

Import #

import { TabsModule } from 'primeng/tabs';

Basic #

Tabs is defined using TabList, Tab, TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties

Header IHeader IIHeader III

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

<p-tabs value="0"> <p-tablist> <p-tab value="0">Header I</p-tab> <p-tab value="1">Header II</p-tab> <p-tab value="2">Header III</p-tab> </p-tablist> <p-tabpanels> <p-tabpanel value="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p-tabpanel> <p-tabpanel value="1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p-tabpanel> <p-tabpanel value="2"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. </p-tabpanel> </p-tabpanels> </p-tabs>

Dynamic #

Tabs can be generated dynamically using the standard @for block.

Tab 1Tab 2Tab 3

Tab 1 Content

Tab 2 Content

Tab 3 Content

<p-tabs value="0"> <p-tablist> @for (tab of tabs; track tab.value) { <p-tab [value]="tab.value">{{ tab.title }}</p-tab> } </p-tablist> <p-tabpanels> @for (tab of tabs; track tab.value) { <p-tabpanel [value]="tab.value"> {{ tab.content }} </p-tabpanel> } </p-tabpanels> </p-tabs>

Controlled #

Tabs can be controlled programmatically using value property as a model.

123

Header IHeader IIHeader III

<div class="flex mb-2 gap-2 justify-end"> <p-button (onClick)="value = 0" rounded="true" styleClass="w-8 h-8 p-0" [outlined]="value !== 0" label="1" /> <p-button (onClick)="value = 1" rounded="true" styleClass="w-8 h-8 p-0" [outlined]="value !== 1" label="2" /> <p-button (onClick)="value = 2" rounded="true" styleClass="w-8 h-8 p-0" [outlined]="value !== 2" label="3" /> </div> <p-tabs [value]="value"> <p-tablist> <p-tab [value]="0">Header I</p-tab> <p-tab [value]="1">Header II</p-tab> <p-tab [value]="2">Header III</p-tab> </p-tablist> <p-tabpanels> <p-tabpanel [value]="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p-tabpanel> <p-tabpanel [value]="1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p-tabpanel> <p-tabpanel [value]="2"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. </p-tabpanel> </p-tabpanels> </p-tabs>

Scrollable #

Adding scrollable property displays navigational buttons at each side to scroll between tabs.

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 Tab 30 Tab 31 Tab 32 Tab 33 Tab 34 Tab 35 Tab 36 Tab 37 Tab 38 Tab 39 Tab 40 Tab 41 Tab 42 Tab 43 Tab 44 Tab 45 Tab 46 Tab 47 Tab 48 Tab 49 Tab 50

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Tab 5 Content

Tab 6 Content

Tab 7 Content

Tab 8 Content

Tab 9 Content

Tab 10 Content

Tab 11 Content

Tab 12 Content

Tab 13 Content

Tab 14 Content

Tab 15 Content

Tab 16 Content

Tab 17 Content

Tab 18 Content

Tab 19 Content

Tab 20 Content

Tab 21 Content

Tab 22 Content

Tab 23 Content

Tab 24 Content

Tab 25 Content

Tab 26 Content

Tab 27 Content

Tab 28 Content

Tab 29 Content

Tab 30 Content

Tab 31 Content

Tab 32 Content

Tab 33 Content

Tab 34 Content

Tab 35 Content

Tab 36 Content

Tab 37 Content

Tab 38 Content

Tab 39 Content

Tab 40 Content

Tab 41 Content

Tab 42 Content

Tab 43 Content

Tab 44 Content

Tab 45 Content

Tab 46 Content

Tab 47 Content

Tab 48 Content

Tab 49 Content

Tab 50 Content

<p-tabs value="0" scrollable> <p-tablist> @for(tab of scrollableTabs; track tab.value){ <p-tab [value]="tab.value"> {{ tab.title }} </p-tab> } </p-tablist> <p-tabpanels> @for(tab of scrollableTabs; track tab.value){ <p-tabpanel [value]="tab.value"> {{ tab.content }} </p-tabpanel> } </p-tabpanels> </p-tabs>

Lazy #

By default, inactive tab's content is rendered (but hidden). You can use the lazy input (either globally on Tabs or individually on a TabPanel) to change this behavior so that content is only rendered when the tab becomes active. If a lazy tab contains complex components that should only be initialized when the tab is activated, you should wrap the content inside: <ng-template #content>your content</ng-template>.

Header IHeader IIHeader III

<p-tabs lazy value="0"> <p-tablist> <p-tab value="0">Header I</p-tab> <p-tab value="1">Header II</p-tab> <p-tab value="2">Header III</p-tab> </p-tablist> <p-tabpanels> <p-tabpanel value="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p-tabpanel> <p-tabpanel value="1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p-tabpanel> <p-tabpanel value="2"> <ng-template #content>Complex components that should only be initialized when the tab becomes active</ng-template> </p-tabpanel> </p-tabpanels> </p-tabs>

Disabled #

Enabling disabled property of a Tab prevents user interaction.

Header IHeader IIHeader IIIHeader IV

<p-tabs value="0"> <p-tablist> <p-tab value="0">Header I</p-tab> <p-tab value="1">Header II</p-tab> <p-tab value="2">Header III</p-tab> <p-tab disabled>Header IV</p-tab> </p-tablist> <p-tabpanels> <p-tabpanel value="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p-tabpanel> <p-tabpanel value="1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p-tabpanel> <p-tabpanel value="2"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. </p-tabpanel> </p-tabpanels> </p-tabs>

Template #

Custom content for a tab is defined with the default ng-content.

Amy ElsnerOnyama LimbaIoni Bowcher2

<p-tabs value="0" scrollable> <p-tablist> <ng-template #previcon> </ng-template> <p-tab value="0" class="flex items-center !gap-2"> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle"/> Amy Elsner </p-tab> <p-tab value="1" class="flex items-center !gap-2"> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" shape="circle" /> Onyama Limba </p-tab> <p-tab value="2" class="flex items-center !gap-2"> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" shape="circle" /> Ioni Bowcher <p-badge value="2" /> </p-tab> <ng-template #nexticon> </ng-template> </p-tablist> <p-tabpanels> <p-tabpanel value="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p-tabpanel> <p-tabpanel value="1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. </p-tabpanel> <p-tabpanel value="2"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. </p-tabpanel> </p-tabpanels> </p-tabs>

Tab Menu #

A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like router-outlet . For the purpose of this demo, router-outlet is not included.

DashboardTransactionsProductsMessages

<p-tabs value="/dashboard"> <p-tablist> @for(tab of tabs; track tab.route){ <p-tab [value]="tab.route" [routerLink]="tab.route" class="flex items-center !gap-2 text-inherit"> {{ tab.label }} </p-tab> } </p-tablist> </p-tabs>

Accessibility #

Screen Reader

Tabs container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each tab header has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding tab content element. The content element of each tab has tabpanel role, an id to match the_aria-controls_ of the header and aria-labelledby reference to the header as the accessible name.

Tab Header Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus through the header. | | enter | Activates the focused tab header. | | space | Activates the focused tab header. | | right arrow | Moves focus to the next header. | | left arrow | Moves focus to the previous header. | | home | Moves focus to the last header. | | end | Moves focus to the first header. |

Import
Basic
Dynamic
Controlled
Scrollable
Lazy
Disabled
Template
Tab Menu
Accessibility

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

PrimeNG 20.3.0 by PrimeTek