3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Tab Group

<wa-tab-group> Since 2.0 stable

Tab groups organize content into a container that shows one section at a time.

Tab groups make use of tabs and tab panels. Each tab must be slotted into the nav slot and its panel must refer to a tab panel of the same name.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel.
<wa-tab-group>
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Examples

Setting the Active Tab

To make a tab active, set the active attribute to the name of the appropriate panel.

General Custom Advanced This is the general tab panel. This is the custom tab panel. This is the advanced tab panel.
<wa-tab-group active="advanced">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
</wa-tab-group>

Tabs on Bottom

Tabs can be shown on the bottom by setting placement to bottom.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel.
<wa-tab-group placement="bottom">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Tabs on Start

Tabs can be shown on the starting side by setting placement to start.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel.
<wa-tab-group placement="start">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Tabs on End

Tabs can be shown on the ending side by setting placement to end.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel.
<wa-tab-group placement="end">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Closable Tabs

You can make a tab closable by adding a close button next to the tab and inside the nav slot. You can position the button to your liking with CSS and handle close/restore behaviors by removing/appending the tab as desired. Note the use of tabindex="-1", which prevents the close button from interfering with the tab order. The close button is still recognizable to the virtual cursor in screen readers.

General Closable Advanced This is the general tab panel. This is the closable tab panel. This is the advanced tab panel.
Restore tab
<wa-tab-group class="tabs-closable">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="closable">Closable</wa-tab>
  <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
  <wa-tab slot="nav" panel="closable-2">Advanced</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="closable">This is the closable tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
</wa-tab-group>

<br>

<wa-button disabled>Restore tab</wa-button>

<style>
  .tabs-closable wa-icon-button {
    position: relative;
    left: -1rem;
    top: .75rem;  }
</style>

<script>
  const tabGroup = document.querySelector('.tabs-closable');
  const generalTab = tabGroup.querySelectorAll('wa-tab')[0];
  const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
  const closeButton = tabGroup.querySelector('wa-icon-button[slot="nav"]');
  const restoreButton = tabGroup.nextElementSibling.nextElementSibling;
  
  // Remove the tab when the close button is clicked
  closeButton.addEventListener('click', () => {
    closableTab.remove();
    closeButton.remove();
    restoreButton.disabled = false;
  });

  // Restore the tab
  restoreButton.addEventListener('click', () => {
    restoreButton.disabled = true;
    generalTab.insertAdjacentElement('afterend', closeButton);
    generalTab.insertAdjacentElement('afterend', closableTab);
  })
</script>

Scrolling Tabs

When there are more tabs than horizontal space allows, the nav will be scrollable.

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10 Tab 11 Tab 12 Tab 13 Tab 14 Tab 15 Tab 16 Tab 17 Tab 18 Tab 19 Tab 20 Tab panel 1 Tab panel 2 Tab panel 3 Tab panel 4 Tab panel 5 Tab panel 6 Tab panel 7 Tab panel 8 Tab panel 9 Tab panel 10 Tab panel 11 Tab panel 12 Tab panel 13 Tab panel 14 Tab panel 15 Tab panel 16 Tab panel 17 Tab panel 18 Tab panel 19 Tab panel 20
<wa-tab-group>
  <wa-tab slot="nav" panel="tab-1">Tab 1</wa-tab>
  <wa-tab slot="nav" panel="tab-2">Tab 2</wa-tab>
  <wa-tab slot="nav" panel="tab-3">Tab 3</wa-tab>
  <wa-tab slot="nav" panel="tab-4">Tab 4</wa-tab>
  <wa-tab slot="nav" panel="tab-5">Tab 5</wa-tab>
  <wa-tab slot="nav" panel="tab-6">Tab 6</wa-tab>
  <wa-tab slot="nav" panel="tab-7">Tab 7</wa-tab>
  <wa-tab slot="nav" panel="tab-8">Tab 8</wa-tab>
  <wa-tab slot="nav" panel="tab-9">Tab 9</wa-tab>
  <wa-tab slot="nav" panel="tab-10">Tab 10</wa-tab>
  <wa-tab slot="nav" panel="tab-11">Tab 11</wa-tab>
  <wa-tab slot="nav" panel="tab-12">Tab 12</wa-tab>
  <wa-tab slot="nav" panel="tab-13">Tab 13</wa-tab>
  <wa-tab slot="nav" panel="tab-14">Tab 14</wa-tab>
  <wa-tab slot="nav" panel="tab-15">Tab 15</wa-tab>
  <wa-tab slot="nav" panel="tab-16">Tab 16</wa-tab>
  <wa-tab slot="nav" panel="tab-17">Tab 17</wa-tab>
  <wa-tab slot="nav" panel="tab-18">Tab 18</wa-tab>
  <wa-tab slot="nav" panel="tab-19">Tab 19</wa-tab>
  <wa-tab slot="nav" panel="tab-20">Tab 20</wa-tab>

  <wa-tab-panel name="tab-1">Tab panel 1</wa-tab-panel>
  <wa-tab-panel name="tab-2">Tab panel 2</wa-tab-panel>
  <wa-tab-panel name="tab-3">Tab panel 3</wa-tab-panel>
  <wa-tab-panel name="tab-4">Tab panel 4</wa-tab-panel>
  <wa-tab-panel name="tab-5">Tab panel 5</wa-tab-panel>
  <wa-tab-panel name="tab-6">Tab panel 6</wa-tab-panel>
  <wa-tab-panel name="tab-7">Tab panel 7</wa-tab-panel>
  <wa-tab-panel name="tab-8">Tab panel 8</wa-tab-panel>
  <wa-tab-panel name="tab-9">Tab panel 9</wa-tab-panel>
  <wa-tab-panel name="tab-10">Tab panel 10</wa-tab-panel>
  <wa-tab-panel name="tab-11">Tab panel 11</wa-tab-panel>
  <wa-tab-panel name="tab-12">Tab panel 12</wa-tab-panel>
  <wa-tab-panel name="tab-13">Tab panel 13</wa-tab-panel>
  <wa-tab-panel name="tab-14">Tab panel 14</wa-tab-panel>
  <wa-tab-panel name="tab-15">Tab panel 15</wa-tab-panel>
  <wa-tab-panel name="tab-16">Tab panel 16</wa-tab-panel>
  <wa-tab-panel name="tab-17">Tab panel 17</wa-tab-panel>
  <wa-tab-panel name="tab-18">Tab panel 18</wa-tab-panel>
  <wa-tab-panel name="tab-19">Tab panel 19</wa-tab-panel>
  <wa-tab-panel name="tab-20">Tab panel 20</wa-tab-panel>
</wa-tab-group>

Manual Activation

When focused, keyboard users can press Left or Right to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation="manual" which will require the user to press Space or Enter before showing the tab panel (manual activation).

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel.
<wa-tab-group activation="manual">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Slots

Name Description
(default) Used for grouping tab panels in the tab group. Must be <wa-tab-panel> elements.
nav Used for grouping tabs in the tab group. Must be <wa-tab> elements.

Properties

Name Description Reflects
active
active
Sets the active tab.
Type string
Default ''
placement
placement
The placement of the tabs.
Type 'top' | 'bottom' | 'start' | 'end'
Default 'top'
activation
activation
When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter.
Type 'auto' | 'manual'
Default 'auto'
noScrollControls
no-scroll-controls
Disables the scroll arrows that appear when tabs overflow.
Type boolean
Default false

Events

Name Description
wa-tab-show Emitted when a tab is shown.
wa-tab-hide Emitted when a tab is hidden.

CSS custom properties

Name Description
--indicator-color
The color of the active tab indicator.
--track-color
The color of the indicator's track (the line that separates tabs from panels).
--track-width
The width of the indicator's track (the line that separates tabs from panels).

CSS parts

Name Description
base The component's base wrapper.
nav The tab group's navigation container where tabs are slotted in.
tabs The container that wraps the tabs.
body The tab group's body where tab panels are slotted in.
scroll-button The previous/next scroll buttons that show when tabs are scrollable, an <wa-icon-button>.
scroll-button--start The starting scroll button.
scroll-button--end The ending scroll button.
scroll-button__base The scroll button's exported base part.

Dependencies

This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/tab-group/tab-group.js';
Coming soon! Coming soon!
    No results