Tabs
Content containers organized in multiple panels, allowing users to view one panel at a time.
{% include "@bolt-components-tabs/tabs.twig" with {
panels: [
{
label: "Tab label 1",
content: "Tab panel 1.",
},
{
label: "Tab label 2",
content: "Tab panel 2.",
},
{
label: "Tab label 3",
content: "Tab panel 3.",
}
]
} only %}
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
panels
|
All of the tab panels. Each panel should contain a label and content. |
array
| — |
|
|
align
|
Horizontal alignment of tab labels. |
string
|
start
|
|
|
label_spacing
|
Set label spacing. |
string
|
small
|
|
|
panel_spacing
|
Set panel spacing. |
string
|
small
|
|
|
inset
|
Controls spacing placement on tab labels and panels. |
string
|
auto
|
|
|
selected_tab
|
- Minimum is
1 Set selected tab by number. To select the second tab, set to 2. |
integer
|
1
|
|
|
scrollOffsetSelector
|
Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector. |
string
| — |
|
|
scrollOffset
|
Additional offset for smooth scrolling, integer converted to pixel value. |
integer
| — |
|
items
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
label
|
Tab label used in the navigation. Twig only. |
string
|
Tab
|
|
|
content
|
Tab panel content. |
string
, object
, array
|
— |
|
|
selected
|
Set active state on tab. Only one active tab allowed at a time. Defaults to first tab. |
boolean
|
false
|
|
|
id
|
Unique identifier for each tab label, may be used for deep linking. |
string
| — |
|
npm install @bolt/components-tabs
inset prop controls how label_spacing and panel_spacing are applied. When set to auto (default), there is inset spacing around labels and no inset spacing around panels, which means panels are flush with the edges of the parent container. When set to on, spacing is applied around the labels as well as the panels. This works well in a container which has no inner padding of its own. When set to off, all inset spacing is turned off. label_spacing applies between labels rather than around them, and panel_spacing only applies above the panel, making the panel flush with the edges of the parent container.
autoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
label_spacing and panel_spacing props, in conjunction with inset, to set spacing around tab labels and panels. See Inset variations page for more on the inset prop.
label_spacing to set spacing around (or between) tab labels.
smallautoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
mediumautoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
panel_spacing to set spacing around tab panels.
noneautoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
smallautoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
mediumautoTab label 1
Tab label 2
Tab label 3
onTab label 1
Tab label 2
Tab label 3
offTab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
Tab label 1
Tab label 2
Tab label 3
A text group
A table
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Row 1 | R1C1 | R1C2 | R1C3 |
| Row 2 | R2C1 | R2C2 | R2C3 |
| Row 3 | R3C1 | R3C2 | R3C3 |
| Footer | FC1 | FC2 | FC3 |
An image
A video
Tabs
Tab label 1
Tab label 2
Tab label 3
An accordion
A carousel
Tab label 1
Tab label 2
A very long tab label
Tab label 4
Tab label 5
Tab label 6
Tab label 1
Tab label 2
Tab label 3
Tab label 4
Tab label 5
Tab label 6
selected_tab prop to pre-selected a tab by number. To select the second tab, set selected_tab to 2. Defaults to first.
Tab label 1
Tab label 2
Tab label 3
This is a Tabbed Band
This is Tab 1
Maximize Value with Next Best Action Intelligence
Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.
This is Tab 2
Maximize Value with Next Best Action Intelligence
Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.
This is Tab 3
Customer Decision Hub
Infuse real-time AI into every customer engagement
There’s nothing artificial about Pega’s proven AI. This always-on brain gets results. Using pragmatic artificial intelligence and decision management, you can improve response rates by up to 6X, NPS by 30 points, and get ROI as high as 500%.
Call to ActionTab label 1
Tab label 2
Tab label 3
Placeholder "fixed" element, should not overlap tabs when page first loads.
scrollOffsetSelector to select the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scrollOffset for any additional adjstments. See a demo: ?selected-tab=tab-3.
Tab label 1
Tab label 2
Tab label 3