2.9.2

Tabs

Tabs organize multiple panels of related content, allowing users to view one panel at a time.

Install via NPM
npm install @bolt/components-tabs
  {% 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 %}

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
Align

Horizontal alignment of tab labels.

string start
  • start, center, end
Label_spacing

Set label spacing.

string small
  • small, 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