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 let-i="index">
{{i}} - Custom {{item.label}}
</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.
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
activeItem | MenuItem | null | Defines the default active menuitem |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
scrollable | boolean | false | When enabled displays buttons at each side of the tab headers to scroll the tab list. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Parameters |
---|---|
item | $implicit: Data of the menu item index: Index of the option |
previousicon | - |
nexticon | - |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Parameters | Description |
---|---|---|
activeItemChange | item: Newly selected MenuItem | Event fired when a tab is selected. |
MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.
Name | Type | Default | Description |
---|---|---|---|
id | string | null | Identifier of the element. |
label | string | null | Text of the item. |
icon | string | null | Icon of the item. |
iconStyle | object | null | Inline style of the item's icon. |
command | function | null | Callback to execute when item is clicked. |
url | string | null | External link to navigate when item is clicked. |
routerLink | array | null | RouterLink definition for internal navigation. |
routerLinkActiveOptions | object | null | Configuration for active router link. |
queryParams | object | null | Query parameters for internal navigation via routerLink. |
fragment | string | null | Sets the hash fragment for the URL. |
queryParamsHandling | QueryParamsHandling | null | How to handle query parameters in the router link for the next navigation. One of: merge : Merge new with current parameters. preserve : Preserve current parameters.k. |
preserveFragment | boolean | false | When true, preserves the URL fragment for the next navigation. |
skipLocationChange | boolean | null | When true, navigates without pushing a new state into history. |
replaceUrl | boolean | null | When true, navigates while replacing the current state in history. |
state | object | null | Developer-defined state that can be passed to any navigation. |
items | array | null | An array of children menuitems. |
expanded | boolean | false | Visibility of submenu. |
disabled | boolean | false | When set as true, disables the menuitem. |
visible | boolean | true | Whether the dom element of menuitem is created or not. |
target | string | null | Specifies where to open the linked document. |
escape | boolean | true | Whether to escape the label or not. Set to false to display html content. |
separator | boolean | false | Defines the item as a separator. |
style | object | null | Inline style of the menuitem. |
styleClass | string | null | Style class of the menuitem. |
badge | string | null | Value of the badge. |
badgeStyleClass | string | null | Style class of the badge. |
title | string | null | Tooltip text of the item. |
automationId | any | null | Value of HTML data-* attribute. |
tabindex | string | 0 | Specifies tab order of the item. |
tooltipOptions | TooltipOptions | - | Options of the item's tooltip. |