tabs docs

Tabs

Content containers organized in multiple panels, allowing users to view one panel at a time.
Usage recommendations
Recommended Not Recommended
Group Related Content: Use for closely related information or functionalities. No Essential Info: Don't hide crucial content that users might miss.
Progressive Disclosure: Ideal for breaking down complex info into manageable sections. No Mixed Content: Keep each tab's content coherent and related.
Quick Filters: Useful for frequently switched content, like "Inbox" and "Sent" in an email client. Avoid Complex UI Inside: Don't nest other complex UI components like carousels or additional sets of tabs within a tab, as it complicates navigation.
Twig Usage
Twig 
{% 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 %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Tabs
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
panels

All of the tab panels. Each panel should contain a label and content.

 array —
  • See below
vertical_tabs

Makes tabs arranged vertically - one on top of the other and place them on the left or right side of the content.

 string none
  • none, left, right
align

Tab labels alignment. Horizontally arranged tabs can be on the left, center or right. When tabs are vertical, they can be at the top, center, or bottom if the height of the content allows.

 string start
  • start, center, end
label_spacing

Set label spacing.

 string small
  • small or medium
panel_spacing

Set panel spacing.

 string small
  • none, small, medium
inset

Controls spacing placement on tab labels and panels.

 string auto
  • auto, on, off
selected_tab
- Minimum is 1

Set selected tab by number. To select the second tab, set to 2.

 integer 1
  • —
scrollOffsetSelector
(deprecated)

This is deprecated. Now selecting the sticky element and offsetting smooth scrolling by the height of that element is done automatically. It's also possible to use the js-bolt-sticky class on any other "fixed" element to flag that it should be used in the scroll offset calculation

 — —
  • —
scrollOffset

Additional offset for smooth scrolling, integer converted to pixel value.

 integer —
  • —
Tabs: 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 —
  • —
Install Install
Bash 
npm install @bolt/components-tabs
Dependencies @bolt/components-trigger @bolt/core @bolt/elements-icon @bolt/lazy-queue @ungap/url-search-params

tabs

Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs vertical

Use vertical_tabs prop, when tabs desired placement should be to the left or right. Please note that below 600px vertical tabs become horizontal. Vertical tabs: left
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Vertical tabs: right
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs inset

The 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. Inset: auto, horizontal tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on, horizontal tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off, horizontal tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: auto, vertical tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on, vertical tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off, vertical tabs.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs label and content spacing

Use 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. Examples for horizontal tabs. Label spacing Use label_spacing to set spacing around (or between) tab labels. Spacing: small Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: medium Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Panel spacing Use panel_spacing to set spacing around tab panels. Spacing: none Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: small Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: medium Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Examples for verical tabs. Label spacing Use label_spacing to set spacing around (or between) tab labels. Spacing: small Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: medium Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Panel spacing Use panel_spacing to set spacing around tab panels. Spacing: none Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: small Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Spacing: medium Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs align

Align for horizontal tabs: start
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Align for horizontal tabs: center
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Align for horizontal tabs: end
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
 Align for vertical tabs. When using vertical tabs, align of center or end make sens only when your tabs total height is larger than content height or content height is larger than total tabs height.
Please note that when individual tab contents are not the same height it will cause bad user experience when changing tabs. It's recomended to have default - align: 'start' when vertical tabs are used, or be sure that all of your tab content is the same height. Align for vertical tabs when: start. Tabs content height is not the same - please avoid.
Tab label 1
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
Tab label 2
1:52
Pega Adaptive Decision Manager
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
Tab label 3
Mountains Align for vertical tabs when: center. Tabs content height is not the same - please avoid.
Tab label 1
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
Tab label 2
1:52
Pega Adaptive Decision Manager
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
Tab label 3
Mountains Align for vertical tabs when: end. Tabs content height is not the same - please avoid.
Tab label 1
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
Tab label 2
1:52
Pega Adaptive Decision Manager
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
Tab label 3
Mountains Align for vertical tabs: start. Tabs content height is the same height.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Tab label 4
Tab panel 4
Tab label 5
Tab panel 5
Tab label 6
Tab panel 6
 Align for vertical tabs: center. Tabs content height is the same height.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Tab label 4
Tab panel 4
Tab label 5
Tab panel 5
Tab label 6
Tab panel 6
 Align for vertical tabs: end. Tabs content height is the same height.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Tab label 4
Tab panel 4
Tab label 5
Tab panel 5
Tab label 6
Tab panel 6

tabs theme

Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.

tabs content

Different content for horizontal tabs examples.
A text group

Eyebrow

This is a headline.

Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CTA 1 CTA 12
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
Mountains
A video
1:52
Pega Adaptive Decision Manager
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
Tabs
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
An accordion
This is a accordion content.
This is a accordion content.
This is a accordion content.
A carousel
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Tab label 1
Tab panel
Tab label 2
Tab panel
A very long tab label
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel
Tab label 1
Tab panel
Tab label 2
Tab panel
Tab label 3
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel
Different content for vertical tabs examples.
@bolt-components-grid/grid.twig
@bolt-components-grid/grid.twig
Tab label 1
Tab panel
Tab label 2
Tab panel
Tab label 3
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel

tabs selected tab

Use 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 panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs use case tabbed band

Tabbed Band A Tabbed Band is a high-level content container that utilizes a specific configuration of the Band and the Tabs components. Tabs will need the following props:
HTML 
inset: 'off',
label_spacing: 'medium',
panel_spacing: 'medium',

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 Action

tabs deep linking

Deep link to a tab by adding a query string to the URL with 'selected-tab' as the name and the tab ID as the value. For example: ?selected-tab=tab-3.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs deep linking with scroll offset

Placeholder "fixed" element, should not overlap tabs when page first loads.
Deep linking will auto-scroll to your selected tab. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, add js-bolt-sticky class to the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-tab=tab-3.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs web component

Web Component Usage Tabs is a web component. Add the <bolt-tabs> element containing multiple <bolt-tabs-panel> elements to create a set of tabs. Inside each <bolt-tab-panel> mark the "label" content with the attribute slot="label". Everything else is considered tab "content".
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
HTML 
<bolt-tabs>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>
Prop Usage Configure the tabs with the properties specified in the schema.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
HTML 
<bolt-tabs panel-spacing="small" align="center">
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>
Advanced Usage Two advanced options are shown below. Automatically show a <bolt-tab-panel> by setting selected-tab on <bolt-tabs> or by adding selected to a single <bolt-tab-panel>.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
HTML 
<!-- Use `selected-tab` to set selected tab -->
<bolt-tabs selected-tab="2">
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>

<!-- Use `selected` to set selected taband vertical-tabs to display tabs vertically -->
<bolt-tabs  vertical-tabs="left">
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel selected>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>