Pivot

The Pivot is a css only control you can use for tab based navigation. It is based on aria attributes so the specific tags are irrelevant to the style. See Accessibility for more information.

For performance, it is usually better to lazy load the contents of the tab using routing or some other mechanism.

Class Structure

Pivot Container

The Pivot starts with a container element. this element must have the .sme-pivot class.

All other pivot elements must be within this container.

Pivot Header

The Pivot Header is required and must have the role="tablist" attribute assigned

inside the header each child must apply the role="tab" attribute.

There are two ways to set up this control depending on if lazy loading is implemented.

Non-Lazy

In this approach, each 'tab' element should:

  1. Use the aria-controls attribute to specify the id of the tab panel that this tab belongs to.
  2. Use the aria-selected attribute (set to true or false) to indicate the selected tab and get the appropriate styling

Lazy

This approach is usually better when working with frameworks like angular and rxjs. In this approach, each 'tab' element should:

  1. Apply the .sme-active class to indicate the selected tab and get the appropriate styling

Note: this has some none accessability issues and will be address with an angular control in a future release to use the aria-selected attribute instead of the .sme-active class.

Pivot Content

The Pivot Content is optional and defined by elements with the role="tabpanel" attribute assigned. This content is only applicable to non-lazy load scenarios.

Each 'tabpanel' element should:

  1. Apply an id attribute the corresponds to a 'tab' elements aria-controls attribute
  2. Use the aria-hidden attribute to indicate the selected tab content and get the appropriate visibility

Examples

Non-Lazy

<div class="sme-pivot"> <header role="tablist"> <a role="tab" aria-controls="pivot-target-1" href="#" aria-selected="true" class="sme-active">Tab 1</a> <a role="tab" aria-controls="pivot-target-2" href="#" aria-selected="false">Tab 2</a> <a role="tab" aria-controls="pivot-target-3" href="#" aria-selected="false">Tab 3</a> </header> <section role="tabpanel" id="pivot-target-1" aria-hidden="false"> Tab 1 </section> <section role="tabpanel" id="pivot-target-2" aria-hidden="true"> Tab 1 </section> <section role="tabpanel" id="pivot-target-3" aria-hidden="true"> Tab 1 </section> </div>

Lazy (using Angular's router directives)

<div class="sme-pivot"> <div role="tablist"> <a role="tab" routerLink="/route1" routerLinkActive="sme-active">Route 1</a> <a role="tab" routerLink="/route2" routerLinkActive="sme-active">Route 2</a> <a role="tab" routerLink="/route3" routerLinkActive="sme-active">Route 3</a> </div> </div>