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 ("tab-1", "tab-2", "tab-3", etc).

Configurable Variables

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

React

The SprkTabs component expects at least two SprkTabsPanels supplied to it. The panels should have the property of tabBtnChildren set to a string of text or JSX. The panels also need children to display in each panel. The SprkTabs component will generate a SprkTabsButton for each panel that you supply and also take care of giving them each unique IDs.

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"
 aria-orientation="horizontal"
 data-sprk-navigation="tabs"
 data-id="tabs-1"
>
  <div
   class="sprk-c-Tabs__buttons"
   role="tablist"
  >
    <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-HideWhenJs"
             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-HideWhenJs"
               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>
<SprkTabs idString="tabs-1">
  <SprkTabsPanel
   isDefaultActive
   tabBtnChildren="Tab 1"
   tabBtnAnalyticsString="tab-1"
   tabBtnDataId="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 l acus venenatis.
    </p>
    </SprkTabsPanel>

    <SprkTabsPanel
     tabBtnChildren="Tab 2"
     tabBtnAnalyticsString="tab-2"
     tabBtnDataId="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. Integer venenatis ex eu mi euismod, non ultricies l acus venenatis.
      </p>
      </SprkTabsPanel>

      <SprkTabsPanel
       tabBtnChildren="Tab 3"
       tabBtnAnalyticsString="tab-3"
       tabBtnDataId="tab-3"
      >
        <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 l acus venenatis.
        </p>
        </SprkTabsPanel>
</SprkTabs>

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.

Information

See below for available customization options:

Component Prop Type Description
SprkTabs children SprkTabsPanel SprkTabs expects SprkTabsPanels to be supplied as children.
SprkTabs idString 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.
SprkTabs additionalClasses string (space-delimited values) Allows a string of classes to add, in addition to the Spark Tabs classes. Intended for overrides.
SprkTabsPanel tabPanelAddClasses string Allows a string of classes to add, in addition to the Spark Tabs panel classes. Intended for overrides.
SprkTabsPanel isDefaultActive boolean The addition of this prop makes the panel and it's generated tab button active. Only one panel can be active by default. Omit this prop from the rest of the SprkTabsPanels.
SprkTabsPanel tabBtnChildren string The value supplied to this will used for the tab button that is generated for the tab panel. You can supply a string or JSX. For example, if you wanted an icon next to text, you could supply that JSX to be used as the children of the button element.
SprkTabsPanel tabBtnAddClasses string (space-delimited values) The value supplied to this will used to add classes to the SprkTabsButton that is generated for the SprkTabsPanel. For example, you could override the background color of the button by supplying a background color utility CSS class.
SprkTabsPanel tabBtnAnalytics string The value supplied to this will used to for the data-analytics attribute for the SprkTabsButton that is generated for the SprkTabsPanel.
SprkTabsPanel tabBtnClickFunc function The function supplied to this prop will run when the corresponding tab button is clicked.