Tabs

Content containers organized in multiple panels, allowing users to view one panel at a time.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage
{% 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)
panels

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

array
  • See below
align

Horizontal alignment of tab labels.

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

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
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
npm install @bolt/components-tabs
Dependencies @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue @ungap/url-search-params