Tab Group

Sticker Sheet Storybook

Examples

Basic Example

<vega-tab-group id="web-tab-group" gap="size-8" show-close-button="false">
    <vega-tab-group-panel id="nav-home">This is the Home tab</vega-tab-group-panel>
    <vega-tab-group-panel id="nav-profile">Profile tab</vega-tab-group-panel>
    <vega-tab-group-panel id="nav-contact" >Contact tab</vega-tab-group-panel>
</vega-tab-group>
document.getElementById('web-tab-group').tabItems = [
    { label: 'Home', dataTarget: 'nav-home', prefixIcon: 'home' },
    { label: 'Profile', dataTarget: 'nav-profile' },
    { label: 'Contact', dataTarget: 'nav-contact' },
];

Example with Close Buttons

<vega-tab-group id="web-tab-group" gap="size-8" show-close-button="true">
    <vega-tab-group-panel id="nav-home">This is the Home tab</vega-tab-group-panel>
    <vega-tab-group-panel id="nav-profile">Profile tab</vega-tab-group-panel>
    <vega-tab-group-panel id="nav-contact" >Contact tab</vega-tab-group-panel>
</vega-tab-group>
document.getElementById('web-tab-group').tabItems = [
    { label: 'Home', dataTarget: 'nav-home', prefixIcon: 'home' },
    { label: 'Profile', dataTarget: 'nav-profile' },
    { label: 'Contact', dataTarget: 'nav-contact' },
];

Example with overflow tabs

<div class="example-container">
    <vega-tab-group id="web-tab-group" gap="size-8" show-close-button="false" class="v-w-full" position-relative-to=".example-container">
        <vega-tab-group-panel id="nav-home">This is the Home tab</vega-tab-group-panel>
        <vega-tab-group-panel id="nav-profile">Profile tab</vega-tab-group-panel>
        <vega-tab-group-panel id="nav-contact" >Contact tab</vega-tab-group-panel>
    </vega-tab-group>
</div>
document.getElementById('web-tab-group').tabItems = [
    { label: 'Home', dataTarget: 'nav-home', prefixIcon: 'home' },
	{ label: 'Profile', dataTarget: 'nav-profile' },
	{ label: 'Contact', dataTarget: 'nav-contact' },
	{ label: 'Contact2', dataTarget: 'nav-contact4' },
	{ label: 'Contact3', dataTarget: 'nav-contact5' },
	{ label: 'Contact4', dataTarget: 'nav-contact6' },
	{ label: 'Contact5', dataTarget: 'nav-contact7' },
	{ label: 'Contact6', dataTarget: 'nav-contact8' },
	{ label: 'Contact7', dataTarget: 'nav-contact9' },
	{ label: 'Contact8', dataTarget: 'nav-contact10' },
];

Example with Nested Tabs

	<vega-tab-group id="web-tab-group" gap="size-8" show-close-button="true">
		<vega-tab-group-panel id="nav-home" is-active="true">
			<div class='v-p-size-12'>
				<vega-tab-group id='child-tab-group' variant='secondary'>
					<vega-tab-group-panel id="child-home">child-home</vega-tab-group-panel>
					<vega-tab-group-panel id="child-profile" is-active="true">child-profile</vega-tab-group-panel>
					<vega-tab-group-panel id="child-contact">child-contact</vega-tab-group-panel>
				</vega-tab-group>
			</div>
		</vega-tab-group-panel>
		<vega-tab-group-panel id="nav-profile">nav-profile</vega-tab-group-panel>
		<vega-tab-group-panel id="nav-contact">nav-contact</vega-tab-group-panel>
	</vega-tab-group>
document.getElementById('web-tab-group').tabItems = [
    { label: 'Home', dataTarget: 'nav-home', prefixIcon: 'social-instagram' },
    { label: 'Profile', dataTarget: 'nav-profile' },
    { label: 'Contact', dataTarget: 'nav-contact' },
];
document.getElementById('child-tab-group').tabItems = [
    { label: 'Child Home', dataTarget: 'child-home' },
    { label: 'Child Profile', dataTarget: 'child-profile' },
    { label: 'Child Contact', dataTarget: 'child-contact' },
];

Note: The above examples use Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-tab-group component creates a simple tab navigation tool. It can be used for combining different amounts of content on the same page, and may serve well in situations where a carousel may not.

Tabs within the vega-tab-group will adjust to smaller screen sizes and allow navigation through arrow controls. Controls between the different tabs can be controlled through JavaScript.

Properties

Name Description Default
selected-tab-data-target The data target of the selected tab. text
show-close-button boolean indicating if the tab show hide is with close button Optional false
gap This specification defines the space in between column elements. The value can be set to any existing spacing design token. 0 size-4 size-8 size-12 size-16 size-20 size-24 size-32 size-8
tab-items The tab item shows tab info. Note: This property tabItems can only be set once for initialization and cannot be overridden. {"label": string, "dataTarget": string, "prefixIcon": string}[] -
variant The tab-group style. primary secondary primary
position-relative-to Selector of the element that will contain the dropdown. If not provided, the dropdown will be appended to the body. If you encounter a problem with scrolling positioning, modify this property. string

Parameters

To include individual panels wihtin the tab group, you will need to use the vega-tab-group-panel as a child component of vega-tab-group as shown below. Note that id is required for this component:

<vega-tab-group id="web-tab-group" gap="size-8" show-close-button="true">
	<vega-tab-group-panel id="nav-home">content:nav-home</vega-tab-group-panel>
	<vega-tab-group-panel id="nav-profile" is-active="true">content:nav-profile</vega-tab-group-panel>
	<vega-tab-group-panel id="nav-contact">content:nav-contact</vega-tab-group-panel>
</vega-tab-group>

Labeling the tabs requires some JavaScript. The dataTarget poperty references the id of the tab. For example:

document.getElementById('web-tab-group').tabItems = [
    { label: 'Home', dataTarget: 'nav-home', prefixIcon: 'social-instagram' },
    { label: 'Profile', dataTarget: 'nav-profile' },
    { label: 'Contact', dataTarget: 'nav-contact' },
];

As shown above, the tabItems property can only be set once for initialization purposes, and cannot be reset.

By default, the first tab is selected.

Event

The vegaClick event is dispatched when a tab is clicked.

document.getElementById("tag_tab_group_id").addEventListener("vegaClick", (e) => {
console.log(e.currentTarget.value) })

For more details, view in Storybook.

Accessibility

  • Elements must only use allowed ARIA attributes
  • ARIA commands must have an accessible name
  • Required ARIA attributes must be provided
  • ARIA roles used must conform to valid values
  • ARIA attributes must conform to valid values
  • ARIA attributes must conform to valid names
  • Elements must have sufficient color contrast
  • id attribute value must be unique
  • Interactive controls must not be nested

Best Practices

  • Tabs are useful for showing different views of the same concept, but not for content which is widely different.
  • Organize the content into sections that make logical sense. In this way users will be able to understand what they will see when they click on each tab.
  • Only use tabs when content can be viewed separately and does not need to be seen in context of information on other tabs.
  • Always highlight the currently selected tab so users can tell where they are.
  • The headers for unselected tabs should be clear, readable, and understandable to the user, so they can freely navigate between them and get what they expect to find.
  • Use short labels, using normal sentence case (not ALL CAPS) so that users can quickly scan them.