Tabs

The tabs component is used to display a group of related content in a tabbed interface. The user can switch between tabs to view different content. The tabs component consists of a collection of tabs, where each tab represents a different piece of content. The tab label should clearly represent the content it opens.

Example

one

two

three

panel one

panel two

panel three

code

<bp-tabs>
  <bp-tab-list aria-label="example tablist">
    <bp-tab selected>one</bp-tab>
    <bp-tab>two</bp-tab>
    <bp-tab>three</bp-tab>
  </bp-tab-list>
  <bp-tab-panel>panel one</bp-tab-panel>
  <bp-tab-panel>panel two</bp-tab-panel>
  <bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>

<script type="module">
  import '@blueprintui/components/include/tabs.js';

  const tabgroup = document.querySelector('bp-tabs');
  const tabs = tabgroup.querySelectorAll('bp-tab');

  tabgroup.addEventListener('click', (e) => {
    if (e.target.tagName === 'BP-TAB') {
      tabs.forEach((t) => (t.selected = false));
      e.target.selected = true;
    }
  });
</script>

Vertical

item one

item two

item three

panel one

panel two

panel three

code

<bp-tabs layout="vertical">
  <bp-tab-list aria-label="example vertical tablist">
    <bp-tab selected>item one</bp-tab>
    <bp-tab>item two</bp-tab>
    <bp-tab>item three</bp-tab>
  </bp-tab-list>
  <bp-tab-panel>panel one</bp-tab-panel>
  <bp-tab-panel>panel two</bp-tab-panel>
  <bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>

<script type="module" interactive>
  import '@blueprintui/components/include/tabs.js';

  const tabgroup = document.querySelector('bp-tabs');
  const tabs = tabgroup.querySelectorAll('bp-tab');

  tabgroup.addEventListener('click', (e) => {
    if (e.target.tagName === 'BP-TAB') {
      tabs.forEach((t) => (t.selected = false));
      e.target.selected = true;
    }
  });
</script>

Install

NPM

// npm package
import '@blueprintui/components/include/tabs.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tabs.js/+esm';
</script>

Accessibility

The tabs component should have a clear visual distinction between the selected and unselected tabs.
The tabs component should be keyboard accessible, allowing users to navigate and activate tabs using the keyboard.
The tab label should clearly represent the content it opens.

bp-tabs

Properties

Name	Types	Description
`accessor`
`layout`	`'horizontal' \| 'vertical'`

Attributes

Name	Types	Description
`accessor`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border-radius`
`--padding`

Slots

Name	Types	Description
`default`

bp-tab

Properties

Name	Types	Description
`accessor`		selected visual state
`selected`	`boolean`
`tabPanel`	`BpTabPanel`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`	represents the name of the current element as a string.
`value`	`string`
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`
`form`	`HTMLFormElement`
`formAction`	`string`
`formEnctype`	`string`
`formMethod`	`string`
`formNoValidate`	`boolean`
`formTarget`	`string`
`labels`	`NodeListOf`
`validationMessage`	`string`
`validity`	`ValidityState`
`willValidate`	`boolean`
`checkValidity`	`any`
`reportValidity`	`any`
`setCustomValidity`	`any`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`accessor`		selected visual state
`popovertargetaction`		determines the current value
`popovertarget`		determines the current value

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`

bp-tab-panel

Properties

Name	Types	Description
`tab`	`BpTab`

CSS Properties

Name	Types	Description
`--padding`

Slots

Name	Types	Description
`default`