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

Import


import {TabMenuModule} from 'primeng/tabmenu';
import {MenuItem} from 'primeng/api';

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 {
    
    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 defaulttem item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.


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


export class TabMenuDemo {
    
    items: MenuItem[];
    
    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];
    }
}

Properties

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.

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

None.

View on GitHub


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


export class TabMenuDemo {
    
    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'}
        ];
    }
}