Source: https://primereact.org/tabmenu/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

TabMenu

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

Import#

import { TabMenu } from 'primereact/tabmenu';

Copy

Basic#

Steps requires a collection of menuitems as its model.

Dashboard
Transactions
Products
Messages
<TabMenu model={items} />

Copy

Controlled#

In controlled mode, a binding to activeIndex property along with onTabChange event are needed to manage the active item.

123

Dashboard
Transactions
Products
Messages

<Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" /> <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />

Copy

Template#

TabMenu offers item customization with the items template property that receives the item instance and returns an element.

Amy Elsner
Anna Fali
Asiya Javayant

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

Copy

Command#

The command property defines the callback to run when an item is activated by click or a key event.

Dashboard
Transactions
Products
Messages
<Toast ref={toast} /> <TabMenu model={items} />

Copy

Router#

Items with navigation are defined with command property to be able to use a router link component, an external link or programmatic navigation.

Router Link
Programmatic
External
<TabMenu model={items} />

Copy

Accessibility#

Screen Reader

TabMenu component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.

Keyboard Support

| Key | Function | | --- | --- | | tab | Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence. | | enter | Activates the focused tab header. | | space | Activates the focused tab header. | | right arrow | Moves focus to the next header. | | left arrow | Moves focus to the previous header. | | home | Moves focus to the first header. | | end | Moves focus to the last header. |

Import
Basic
Controlled
Template
Command
Router
Accessibility

PrimeReact 10.9.7 by PrimeTek