---
meta:
title: Tab Group
description: Tab groups organize content into a container that shows one section at a time.
layout: component
---
Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
```html:preview
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.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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.
);
```
## Examples
### Tabs on Bottom
Tabs can be shown on the bottom by setting `placement` to `bottom`.
```html:preview
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.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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.
);
```
### Tabs on Start
Tabs can be shown on the starting side by setting `placement` to `start`.
```html:preview
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.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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.
);
```
### Tabs on End
Tabs can be shown on the ending side by setting `placement` to `end`.
```html:preview
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.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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.
);
```
### Closable Tabs
Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
```html:preview
General
Closable 1
Closable 2
Closable 3
This is the general tab panel.
This is the first closable tab panel.
This is the second closable tab panel.
This is the third closable tab panel.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => {
function handleClose(event) {
//
// This is a crude example that removes the tab and its panel from the DOM.
// There are better ways to manage tab creation/removal in React, but that
// would significantly complicate the example.
//
const tab = event.target;
const tabGroup = tab.closest('sl-tab-group');
const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
tab.remove();
tabPanel.remove();
}
return (
General
Closable 1
Closable 2
Closable 3
This is the general tab panel.
This is the first closable tab panel.
This is the second closable tab panel.
This is the third closable tab panel.
);
};
```
### Scrolling Tabs
When there are more tabs than horizontal space allows, the nav will be scrollable.
```html:preview
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
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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
);
```
### 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).
```html:preview
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.
```
```jsx:react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
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.
);
```