TabMenu is a navigation component that displays menu items as tab headers.
import { TabMenu } from 'primereact/tabmenu';
Steps requires a collection of menuitems as its model.
<TabMenu model={items} />
In controlled mode, a binding to activeIndex property along with onTabChange event are needed to manage the active item.
<Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" />
<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
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. |
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.
| 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. |