Angular TabMenu

Angular TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

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: 'Home', icon: 'pi pi-fw pi-home'},
            {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
            {label: 'Settings', icon: 'pi pi-fw pi-cog'}
        ];
    }
}

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: 'Home', icon: 'pi pi-fw pi-home'},
            {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
            {label: 'Settings', icon: 'pi pi-fw pi-cog'}
        ];

        this.activeItem = this.items[0];
    }
}

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>

Theming

TabMenu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG TabMenu showcase for demos and documentation.