# Tab Group
[component-header:sl-tab-group]
Tab groups organize content into a container that shows one section at a time.
Tab groups make use of [tabs](/components/tab.md) and [tab panels](/components/tab-panel.md). 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.
```
## 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.
```
### Tabs on Left
Tabs can be shown on the left by setting `placement` to `left`.
```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.
```
### Tabs on Right
Tabs can be shown on the right by setting `placement` to `right`.
```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.
```
### 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
```
[component-metadata:sl-tab-group]