TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
import { TabMenuModule } from 'primeng/tabmenu';
TabMenu requires a collection of menuitems as its model.
<p-tabmenu [model]="items" />
For controlled mode, use activeItem property along with activeItemChange event are needed to manage the active item.
<div class="flex mb-2 gap-2 justify-end">
<p-button
(click)="activeItem = items[0]"
[rounded]="true"
label="1"
styleClass="w-8 h-8 p-0"
[outlined]="activeItem !== items[0]" />
<p-button
(click)="activeItem = items[1]"
[rounded]="true"
label="2"
styleClass="w-8 h-8 p-0"
[outlined]="activeItem !== items[1]" />
<p-button
(click)="activeItem = items[2]"
[rounded]="true"
label="3"
styleClass="w-8 h-8 p-0"
[outlined]="activeItem !== items[2]" />
</div>
<p-tabmenu
[model]="items"
[activeItem]="activeItem"
(activeItemChange)="onActiveItemChange($event)" />
TabMenu supports templating via the item template which gets the menuitem instance and the index.
<p-tabmenu [model]="items" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item>
<a pRipple class="flex items-center gap-2 p-menuitem-link">
<img
[alt]="item.name"
[src]="'https://primefaces.org/cdn/primeng/images/demo/avatar/' + item.image"
style="width: 32px" />
<span class="font-bold">
{{ item.name }}
</span>
</a>
</ng-template>
</p-tabmenu>
The command property defines the callback to run when an item is activated by click or a key event.
<p-toast />
<p-tabmenu [model]="items" />
Items with navigation are defined with templating to be able to use a router link directive, an external link or programmatic navigation.
<p-tabmenu [model]="items">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route; else elseBlock">
<a [routerLink]="item.route" class="p-menuitem-link">
<span [class]="item.icon"></span>
<span class="ml-2">
{{ item.label }}
</span>
</a>
</ng-container>
<ng-template #elseBlock>
<a [href]="item.url" class="p-menuitem-link">
<span [class]="item.icon"></span>
<span class="ml-2">
{{ item.label }}
</span>
</a>
</ng-template>
</ng-template>
</p-tabmenu>
TabMenu component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.
Key | Function |
---|---|
tab | Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence. |
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 first header. |
end | Moves focus to the last header. |