PrimeTek UI Component Libraries
React TabMenu

React TabMenu

PrimeTek's photo
PrimeTek
·

2 min read

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

Setup

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

Import

import { TabMenu } from 'primereact/tabmenu';

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, activeItem and onTabChange properties must be defined along with the model.

<TabMenu model={items} activeItem={activeItem} onTabChange={(e) => setActiveItem(e.value)}/>

Uncontrolled

In uncontrolled mode, only model is required. Initial active item can be provided using the activeItem 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} />

Theming

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

Resources

Visit the PrimeReact TabMenu showcase for demos and documentation.

ReactJavaScriptWeb Development