TabGroup

shadow

TabGroup displays a tab-based navigation that allows users to switch between and view different parts of the application's content without having to navigate to another page. It consists of individual tabs Tab and Panels, which when clicked display the contents of the tab. The TabGroup element supports multiple appearance variants using the variant attribute.

Basic usage

The Card element has been used only for the purpose of this demonstration.

Variants of tab placement

By adding the variant property it is possible to change the location of the tabs. Supported values are start, end and bottom.

Start

End

Bottom

When to use

Use wje-tab-group 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

No properties available for this component.

Events

No events available for this component.

Methods

removeActiveTab

Description	Removes the 'active' class from all panel and tab elements.
Signature	() => void

setActiveTab

Description	Sets the active tab and panel.
Signature	(tab: string) => void

getActiveTab

Description	Returns the currently active tab.
Signature	() => Element｜null

getTabAll

Description	Returns all tabs.
Signature	() => Array<Element>

getAllTabs

Description	Returns all tabs, including those moved to "more".
Signature	() => Array<Element>

getPanelAll

Description	Returns all panels.
Signature	() => Array<Element>

getPanelAllName

Description	Returns the names of all tabs.
Signature	() => Array<string>

toggleMoreVisibility

Description	Toggles the visibility of the "more" dropdown based on the presence of tabs in the "more" slot.
Signature	() => void

initTabMetrics

Description	Initializes metrics for tabs within the component. Assigns each tab to the navigation slot and calculates their dimensions for further operations.
Signature	() => void

checkOverflow

Description	Checks if the tabs within a navigation bar overflow the available space. Moves overflowing tabs into a dropdown menu and updates their state accordingly.
Signature	() => void

dropdownActive

Description	Toggles the "dropdown-active" class on the element based on its "active" status and the value of its "slot" attribute.
Signature	(el: HTMLElement) => void

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--wje-tab-group-padding	Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., px, rem, em, %).

Slots

Name	Description
default	The default slot for the tab group.
nav	Slot for the navigation of the tab group.