TabMenu is a navigation/command component that displays items as tab headers.
import TabMenu from 'primevue/tabmenu';
Steps requires a collection of menuitems as its model. TabMenu can be also integrated with Vue Router.
<TabMenu :model="items" />
<router-view />
Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
<Button @click="active = 0" text outlined label="Activate 1st" />
<TabMenu v-model:activeIndex="active" :model="items" />
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. |
| p-tabmenuitem | Menuitem element. |
| p-menuitem-link | Link element of the menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-menuitem-text | Text 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. |