Tabs

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

Published Last updated: 2.30.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.
Prop Name Description Type Default Value Option(s)
panels

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

 array —
  • [items]:
    • Type:object
    • Properties:
      • label

        Tab label used in the navigation. Twig only.

        • Type: string
      • content

        Tab panel content.

        • Type: string, object, array
      • selected

        Set active state on tab. Only one active tab allowed at a time. Defaults to first tab.

        • Type: boolean
      • id

        Unique identifier for each tab label, may be used for deep linking.

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