Tabbed Navigation

Code Examples

The Tabbed Navigation component is a set of clickable buttons that each display content related to a specific subject. Use a Tabbed Navigation component when you want to organize pieces of related content. When a Tab button is clicked it will hide the previously shown tab content and show its own.

Restrictions

  • Tabbed Navigation needs to have at least two tabs.
  • There should not be more than seven tabs in any single Tabbed Navigation.
  • Tab label content should not exceed a reasonable length.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("toggle-1", "toggle-2", "toggle-3", etc).

Configurable Variables

Variable Default Description
$tab-navigation-breakpoint 46rem The breakpoint at which the tabs go from stacked layout to side by side.
$tab-navigation-btn-color $black The tab button text color.
$tab-navigation-btn-bg-color $gray The background color of the tab buttons.
$tab-navigation-btn-border-top 3px solid $gray The border on the top of the button tabs.
$tab-navigation-btn-hover-border-top 3px solid $red The border on the top of the button tabs on hover.
$tab-navigation-btn-active-color $red The button tab text color of the currently active tab.
$tab-navigation-btn-active-border-top 3px solid $red The button tab top border of the currently active tab.
$tab-navigation-btn-active-bg-color $gray The button tab background color of the currently active tab.
$sprk-tab-navigation-font-size $font-size-body-one The font size of the tab text.
$sprk-tab-navigation-font-weight $font-weight-body-one The font weight of the tab text.

Class Modifiers

Class Description
sprk-c-Tabs__button--active Apply to the currently active tab to set active state styles.

Base

Angular

The sprk-tabbed-navigation component expects a number of clickable elements, typically buttons, to be supplied. These elements should have the sprkTabbedNavigationTab directive applied. You should also supply a matching number of elements, typically divs, with the sprkTabbedNavigationPanel applied.

Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.

Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh.

Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.

<div class="sprk-c-Tabs" role="tablist" aria-orientation="horizontal" data-sprk-navigation="tabs" data-id="tabs-1">
  <div class="sprk-c-Tabs__buttons">
    <button class="sprk-c-Tabs__button sprk-c-Tabs__button--active" role="tab" aria-controls="target-1" aria-selected="true" id="tab-1" type="button" data-id="tab-1">
      Tab 1
    </button>

    <button class="sprk-c-Tabs__button" role="tab" aria-controls="target-2" aria-selected="false" id="tab-2" type="button" data-id="tab-2">
      Tab 2
    </button>

    <button class="sprk-c-Tabs__button" role="tab" aria-controls="target-3" aria-selected="false" id="tab-3" type="button" data-id="tab-3">
      Tab 3
    </button>
  </div>

  <div class="sprk-c-Tabs__content" id="target-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p class="sprk-b-TypeBodyTwo">Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.
    </p>
  </div>
  <div class="sprk-c-Tabs__content sprk-u-Display--none" id="target-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
    <p class="sprk-b-TypeBodyTwo">Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh.</p>
  </div>
  <div class="sprk-c-Tabs__content sprk-u-Display--none" id="target-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3">
    <p class="sprk-b-TypeBodyTwo">Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.
    </p>
  </div>
</div>
          
<sprk-tabbed-navigation idString="tabs-1">
  <button sprkTabbedNavigationTab analyticsString="Tab: 1" data-id="tab-1">Tab 1</button>
  <button [defaultActive]=true sprkTabbedNavigationTab data-id="tab-2">Tab 2</button>
  <button sprkTabbedNavigationTab data-id="tab-3">Tab 3</button>
  <div sprkTabbedNavigationPanel>
    <p>Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.</p>
  </div>
  <div [defaultActive]="true" sprkTabbedNavigationPanel>
    <p>Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.</p>
  </div>
  <div sprkTabbedNavigationPanel>
    <p>Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.</p>
  </div>
</sprk-tabbed-navigation>

Information

See below for available customization options:

Property Property Type Value Type Description
sprkTabbedNavigationTab Directive string Used by the component to attach tabs to panels.
sprkTabbedNavigationPanel Directive string Used by the component to attach tabs to panels.
additionalClasses Input string Expects a space-separated string of class names that will be appended to the class attribute.
idString Input string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.