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