lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

onetwothreepanel onepanel twopanel 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 oneitem twoitem threepanel onepanel twopanel 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

NameTypesDescription
layout'horizontal' | 'vertical'

Attributes

NameTypesDescription
layout'horizontal' | 'vertical'

CSS Properties

NameTypesDescription
--background
--color
--border-radius
--padding

Slots

NameTypesDescription
default

bp-tab

Properties

NameTypesDescription
selectedbooleanselected visual state
tabPanelBpTabPanel
pressedbooleanturns the button into a toggle button
expandedbooleanindicate if a control is expanded or collapsed
readonlybooleanmakes the element not mutable, meaning the user can not interact with button
disabledbooleandetermines if element is mutable or focusable
type'button' | 'submit'default behavior of the button
namestringrepresents the name of the current
element as a string.
valuestringdetermines the current value
popoverTargetElementHTMLElement
popoverTargetAction| 'toggle' | 'show' | 'hide'
popovertargetstring
formHTMLFormElement
formActionstring
formEnctypestring
formMethodstring
formNoValidateboolean
formTargetstring
labelsNodeListOf
validationMessagestring
validityValidityState
willValidateboolean
checkValidityany
reportValidityany
setCustomValidityany
formAssociatedboolean

Attributes

NameTypesDescription
selectedbooleanselected visual state
pressedbooleanturns the button into a toggle button
expandedbooleanindicate if a control is expanded or collapsed
readonlybooleanmakes the element not mutable, meaning the user can not interact with button
disabledbooleandetermines if element is mutable or focusable
type'button' | 'submit'default behavior of the button
valuestringdetermines the current value
popoverTargetElementHTMLElement
popovertargetaction| 'toggle' | 'show' | 'hide'
popovertargetstring

CSS Properties

NameTypesDescription
--background

Slots

NameTypesDescription
default

bp-tab-panel

Properties

NameTypesDescription

CSS Properties

NameTypesDescription
--padding

Slots

NameTypesDescription
default