ba-tab-container

A tab component for showing groups of content

Figma

GitHub

Storybook

Live Demo

Tab 1

Tab 2

Tab 3

Tab 1

Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et. Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor aliquip pariatur.

Tab 2

Tab 3

<ba-tab-container heading="Account options" heading-level="3">
  <ba-tab-container-header slot="header" name="tab1">
    Tab 1
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab2">
    Tab 2
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab3">
    Tab 3
  </ba-tab-container-header>

  <ba-tab-container-content name="tab1">
    <ba-content>
      <h4>Tab 1</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>

  <ba-tab-container-content name="tab2">
    <ba-content>
      <h4>Tab 2</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>

  <ba-tab-container-content name="tab3">
    <ba-content>
      <h4>Tab 3</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>
</ba-tab-container>

Guidelines

Both matching ba-tab-container-header and ba-tab-container-content should use the same name attributes. This allows the tab to correctly switch the content based on the selected tab header.

Keeping the tab headings small and concise help users understand immediately what each tab contains. Try to keep them limited to 1-2 words and no longer than 25 characters.

Keeping the number of tabs used to a minimum helps with user scannability and cognitive load

Accessibility

The heading shows on mobile and provides extra context as to what the tabs are for. Screen reader users will also get the heading announced when first tabbing onto the tabs.

It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.

Element	State	Key press	Behaviour
Previous element in DOM	Previous element in DOM has focus	`Tab`	`<ba-tab-container-header>` gets focus.
`<ba-tab-container-header>`	`<ba-tab-container-header>` has focus	`Right arrow`	Moves focus to next `<ba-tab-container-header>` element
`<ba-tab-container-header>`	`<ba-tab-container-header>` has focus	`Left arrow`	Moves focus to previous `<ba-tab-container-header>` element
`<ba-tab-container-header>`	`<ba-tab-container-header>` has focus	`Tab`.	Moves focus to `<ba-tab-container-content>` element

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`activeTabName`	`active-tab-name`	The name of the active tab.	`string \| undefined`	`undefined`
`dropShadow`	`drop-shadow`	Whether to show a drop shadow on the mobile tab header	`boolean \| undefined`	`false`
`fullWidth`	`full-width`	Whether to make the headings full width	`boolean \| undefined`	`false`
`heading`(required)	`heading`	The heading for the tab	`string`	`undefined`
`headingLevel`	`heading-level`	Sets the tab headingLevel, this will populate an within the tab	`2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`2`

Slots

Slot	Description	Permitted elements
`"header"`	The clickable tab sections will be rendered here	`<ba‑tab‑container‑header>`
Unnamed slot	The main content of the tab will be rendered here	`<ba‑tab‑container‑content>`

Parent components

ba-tab-container can be slotted into:

Usage

Basic usage

<ba-tab-container> has two sub components that should be used to build the tabs.

<ba-tab-container-header> This has a default slot which just accepts plain text.
<ba-tab-container-content> This has a default slot which accepts <ba-grid>, <ba-flex>, <ba-content> and <ba-form> as its direct child.

They both have the same required prop which is used to keep them in sync when switching tabs

Property	Attribute	Description	Type	Default
`name` (required)	`name`	The name of the tab	`string`	`undefined`

Basic example with content

<ba-tab-container heading="Account options" heading-level="3">
  <ba-tab-container-header slot="header" name="tab1">
    Tab 1
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab2">
    Tab 2
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab3">
    Tab 3
  </ba-tab-container-header>

  <ba-tab-container-content name="tab1">
    <ba-content>
      <h4>Tab 1</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>

  <ba-tab-container-content name="tab2">
    <ba-content>
      <h4>Tab 2</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>

  <ba-tab-container-content name="tab3">
    <ba-content>
      <h4>Tab 3</h4>
      <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
    </ba-content>
  </ba-tab-container-content>
</ba-tab-container>

Setting the heading level

The heading level can be set by passing a number to to the heading-level attribute. The heading level should be set by the preceding heading on the page. Headings within the tabs content should start at 1 level lower than has been set in the heading-level attribute.

The heading level has been set to 3 so that it appears below the <h2> in the document outline

<h2>A heading further up the page</h2>

...

<ba-tab-container heading="Account options" heading-level="3">
  <ba-tab-container-header slot="header" name="tab1">
    Your trips
  </ba-tab-container-header>

  <ba-tab-container-content name="tab1">
    <ba-page-segment>
      <ba-content>
        <h4>Your trips content</h4>
        <p>
          Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore
          adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur
          consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et.
          Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing
          velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor
          aliquip pariatur.
        </p>
      </ba-content>
    </ba-page-segment>
  </ba-tab-container-content>
</ba-tab-container>

Setting the active tab

It's possible to set the active tab on page load by setting the active-tab-name attribute to one of your tabs

Setting the active tab on page load

<ba-tab-container heading="Account options" active-tab-name="tab2">
  <ba-tab-container-header slot="header" name="tab1">
    Tab 1
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab2">
    Tab 2
  </ba-tab-container-header>
  <ba-tab-container-header slot="header" name="tab3">
    Tab 3
  </ba-tab-container-header>

  <ba-tab-container-content name="tab1">
    <ba-page-segment>
      <ba-content>
        ...
    </ba-page-segment>
  </ba-tab-container-content>
  <ba-tab-container-content name="tab2">
    <ba-page-segment>
      <ba-content>
        ...
    </ba-page-segment>
  </ba-tab-container-content>
  <ba-tab-container-content name="tab3">
    <ba-page-segment>
      <ba-content>
        ...
    </ba-page-segment>
  </ba-tab-container-content>
</ba-tab>

You can turn on a drop shadow for the mobile menu to help give it more prominence on the page.

Setting a drop shadow on the mobile menu

<ba-tab-container heading="Account options" drop-shadow>
</ba-tab-container>

ba-tab-container

Live Demo

Tab 1

Tab 2

Tab 3

Guidelines

Accessibility

Code

Properties & Attributes

Slots

Parent components

Usage

Basic usage

Setting the heading level

Setting the active tab

Setting a drop shadow for the mobile menu