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"></p-tabMenu>
By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.
<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
For controlled mode, use activeItem property along with activeItemChange event are needed to manage the active item.
<button type="button" pButton pRipple label="Activate Last" (click)="activateLast()" class="mb-3"></button>
<p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)"></p-tabMenu>
Setting scrollable property to true enables scrolling if content overflows.
<p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>
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 class="p-menuitem-link flex justify-content-between align-items-center p-3">
<div>
<span [class]="item.icon"></span>
<span> {{ item.label }}</span>
</div>
<div>
<span *ngIf="item.shortcut" [class]="item.shortcutClass">{{ item.shortcut }}</span>
<p-badge *ngIf="item.badge" [value]="item.badge" [severity]="item.badgeSeverity"></p-badge>
</div>
</a>
</ng-template>
</p-tabMenu>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-tabmenu | Container element. |
p-tabmenu-nav | List element of headers. |
p-tabmenuitem | Menuitem element. |
p-menuitem-link | Link inside a menuitem. |
p-menuitem-text | Label of a menuitem. |
p-menuitem-icon | Icon of a menuitem. |
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. |
API defines helper props, events and others for the PrimeNG TabMenu module.
TabMenu is a navigation component that displays items as tab headers.
Defines the input properties of the component.
name | type | default | description | ||
---|---|---|---|---|---|
MenuItem[] | |||||
MenuItem | |||||
boolean | |||||
Object | |||||
string | |||||
string | |||||
string |
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
name | parameters | description | |
---|---|---|---|
value : MenuItem |
Defines the templates used by the component.
name | parameters | description | |
---|---|---|---|
context : {
$implicit: any, // Item instance.
index: number, // Item index.
} | |||
null | |||
null |
Defines the custom interfaces used by the module.
MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.
name | type | description |
---|---|---|
string | ||
string | ||
- | ||
string | ||
MenuItem[] | ||
boolean | ||
boolean | ||
boolean | ||
string | ||
boolean | ||
any | ||
boolean | ||
string | ||
string | ||
string | ||
string | ||
Object | ||
string | ||
string | ||
string | ||
any | ||
string | ||
any | ||
Object | ||
string | ||
QueryParamsHandling | ||
boolean | ||
boolean | ||
boolean | ||
Object | ||
string | ||
Object | ||
TooltipOptions |