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 
{% 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
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
(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 
npm install @bolt/components-tabs
Dependencies @bolt/components-trigger @bolt/core @bolt/elements-icon @bolt/lazy-queue @ungap/url-search-params