TabMenu Menu is a navigation/command component that displays items as tab headers.

Import


import {TabMenuModule,MenuItem} from 'primeng/primeng';

MenuModel API

TabMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

TabMenu requires a collection of menuitems as its model.


<p-tabMenu [model]="items"></p-tabMenu>


export class TabMenuDemo {
    
    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'Stats', icon: 'fa-bar-chart'},
            {label: 'Calendar', icon: 'fa-calendar'},
            {label: 'Documentation', icon: 'fa-book'},
            {label: 'Support', icon: 'fa-support'},
            {label: 'Social', icon: 'fa-twitter'}
        ];
    }
}

ActiveItem

By default, first item is activated, use activeItem property to choose the initial active item.


<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>


export class TabMenuDemo {
    
    private items: MenuItem[];
    
    private activeItem: MenuItem;

    ngOnInit() {
        this.items = [
            {label: 'Stats', icon: 'fa-bar-chart'},
            {label: 'Calendar', icon: 'fa-calendar'},
            {label: 'Documentation', icon: 'fa-book'},
            {label: 'Support', icon: 'fa-support'},
            {label: 'Social', icon: 'fa-twitter'}
        ];
        
        this.activeItem = this.items[2];
    }
}

Attributes

Name Type Default Description
model array null An array of menuitems.
activeItem MenuElement null Defines the default active menuitem
style string null Inline style of the component.
styleClass string null Style class of the component.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-tabmenu Container element.
ui-tabmenu-nav List element of headers.
ui-tabmenuitem Menuitem element.
ui-menuitem-link Link inside a menuitem.
ui-menuitem-text Label of a menuitem.
ui-menuitem-icon Icon of a menuitem.

Dependencies

Native component that requires the css of PrimeUI TabMenu.


<p-tabMenu [model]="items"></p-tabMenu>


export class TabMenuDemo {
    
    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'Stats', icon: 'fa-bar-chart'},
            {label: 'Calendar', icon: 'fa-calendar'},
            {label: 'Documentation', icon: 'fa-book'},
            {label: 'Support', icon: 'fa-support'},
            {label: 'Social', icon: 'fa-twitter'}
        ];
    }
}