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.
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">
<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">
Tab 1
</button>
<button class="sprk-c-Tabs__button" role="tab" aria-controls="target-2" aria-selected="false" id="tab-2" type="button">
Tab 2
</button>
<button class="sprk-c-Tabs__button" role="tab" aria-controls="target-3" aria-selected="false" id="tab-3" type="button">
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>
<button sprkTabbedNavigationTab analyticsString="Tab: 1">Tab 1</button>
<button [defaultActive]=true sprkTabbedNavigationTab>Tab 2</button>
<button sprkTabbedNavigationTab>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>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. |