TabMenu

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

Default

Programmatic

Import via Module


import { TabMenu } from 'primereact/tabmenu';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/tabmenu/tabmenu.min.js"></script>

MenuModel API

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

Getting Started

TabMenu requires a collection of menuitems as its model and can either be used as a Controlled or Uncontrolled component.


const 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'}
];

Controlled Component

In controlled mode, activeIndex and onTabChange properties must be defined along with the model.


<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}/>

Uncontrolled

In uncontrolled mode, only model is required. Initial active item can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the active item, prefer to use the component as controlled.


<TabMenu model={items} />

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
model	array	null	An array of menuitems.
activeIndex	number	0	Active index of menuitem.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.

Events

Name	Parameters	Description
onTabChange	event.originalEvent: Browser event event.value: Selected menuitem event.index: Index of the selected tab	Callback to invoke when active tab changes.

Styling

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.