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

Documentation

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 fa-fw fa-bar-chart'},
            {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
            {label: 'Social', icon: 'fa fa-fw fa-twitter'}
        ];
    }
}
 

ActiveItem

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]="items[0]"></p-tabMenu>
 

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

Templating

Menuitem content supports templating via the "item" template which gets the menuitem instance and the index.

<p-tabMenu [model]="items">
    <ng-template pTemplate="item" let-item let-i="index">
        //item content
    </ng-template>
</p-tabMenu>
 

Properties

Styling

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

Dependencies

None.

Source

View on GitHub

<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
    <ng-template pTemplate="item" let-item let-i="index">
        <div style="position: relative; text-align: center; min-width: 10em">
            <div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
            <div class="ui-menuitem-text">
                {{item.label}}
            </div>
            <a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
                <span class="pi pi-times"></span>
            </a>
        </div>
    </ng-template>
</p-tabMenu>
 

export class TabMenuDemo {
    items1: MenuItem[];
    items2: MenuItem[];
    activeItem: MenuItem;
    ngOnInit() {
        this.items1 = [
            {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
            {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
            {label: 'Social', icon: 'fa fa-fw fa-twitter'}
        ];
        this.items2 = [
            {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
            {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
            {label: 'Social', icon: 'fa fa-fw fa-twitter'}
        ];
        this.activeItem = this.items2[0];
    }
    closeItem(event, index) {
        this.items2 = this.items2.filter((item, i) => i !== index);
        event.preventDefault();
    }
}