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).

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>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>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>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.