Tab
The Tab component is a child of the TabGroup component and serves as a tab-based navigation button. It is used in combination with the TabPanel element.
note
For examples of using the Tab component, go to the documentation TabGroup.
When to use
Use wje-tab when users need to understand location, move between views, or traverse hierarchy.
When not to use
Do not combine multiple competing navigation patterns for the same user flow.
Accessibility
Ensure visible active/selected states, predictable tab order, and clear control naming.
Best Practices
- Keep URL state and UI navigation state synchronized.
- Use consistent labels across menu, breadcrumbs, and tabs.
- Add context for deep structures (breadcrumbs, headings, icon cues).
Attributes and Properties
last
| Description | Indicates whether this is the last tab. |
| Attribute | last |
| Type | boolean |
| Default | false |
Events
| Name | Description |
|---|---|
wje-tab:change | Dispatched when the tab is changed. |
Methods
syncAriaLabel
| Description | Sync aria-label on host based on slotted text when not provided. |
| Signature | () => void |
setRovingTabIndex
| Description | Sets the roving tabindex on the internal focusable anchor. |
| Signature | (value: number) => void |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wje-tab-text-transform | The text transformation for the tab (e.g., uppercase, lowercase). |
--wje-tab-font-weight | The font weight of the tab text. |
--wje-tab-letter-spacing | The letter spacing of the tab text. |
--wje-tab-padding-inline | The horizontal padding of the tab. |
--wje-tab-padding-top | The top padding of the tab text. |
--wje-tab-padding-bottom | The bottom padding of the tab text. |
--wje-tab-color-active | The text color of the active tab. |
--wje-tab-color-hover | The text color of the tab when hovered. |
Slots
No slots available for this component.