Skip to main content

Pivot

Pivots are used to selectively display content that is frequently accessed, distinct, and within the same region on a page. A pivot is made up of two or more content panes that have corresponding headers. The headers persist on-screen and have a selection state that’s clearly shown, so users are always aware of which header the content pertains to.

Example

Advanced technology Versatility Performance

Innovation inside

Surface devices are meticulously crafted by Microsoft using the most advanced technology. PixelSense™ displays with image quality that rivals real life, incredibly powerful 6th Gen Intel® Core™ processors, and Surface Pen makes each member of the Surface family into a category redefining device.

Pivot on a default theme

Best practices

Use pivot to display in-page tabbed content.

Do

  • When there are two levels of pivots, the top-level and sub-level headers should have enough visual differentiation so that users can clearly separate the two.

Don’t

  • Don’t nest pivots more than two levels (top-level/sub-level pattern).
  • Don’t use pivots to navigate to another page. Use link navigation instead.
  • Don’t use pivots to scroll the browser to specific content. Use in-page navigation instead.

Also known as

Tabs

Related

Hyperlink
Select button

Options

  • Active: Add a class name f-active to a pivot item to set as active.
  • Disabled: Add a class name f-disabled to the component along with data-f-state="disabled" to disable. In addition, each pivot item should include a data attribute aria-disabled="true" for screen readers.
  • Glyph: To use a glyph, add the c-glyph class as well as the class name of the glyph being adding to the <a> element.

Development

  • Schema definition: The pivot schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Pivot (active)

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<div class="c-pivot">
    <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
    <div role="tablist">
        <a class="f-active" role="tab" tabindex="0" aria-controls="examplePivot1Target1">Pivot 1</a>
        <a role="tab" aria-controls="examplePivot1Target2">Pivot 2</a>
        <a role="tab" aria-controls="examplePivot1Target3">Pivot 3</a>
    </div>
    <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
    <section id="examplePivot1Target1" role="tabpanel" aria-hidden="false">
        <h3 class="c-heading-3">Section 1</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="examplePivot1Target2" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 2</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="examplePivot1Target3" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 3</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
</div>

Pivot with glyph (active)

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<div class="c-pivot">
    <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
    <div role="tablist">
        <a class="c-glyph glyph-phone f-active" role="tab" tabindex="0" aria-controls="exampleGlyphPivot1Target1">Pivot 1</a>
        <a class="c-glyph glyph-edit" role="tab" aria-controls="exampleGlyphPivot1Target2">Pivot 2</a>
        <a class="c-glyph glyph-play" role="tab" aria-controls="exampleGlyphPivot1Target3">Pivot 3</a>
    </div>
    <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
    <section id="exampleGlyphPivot1Target1" role="tabpanel" aria-hidden="false">
        <h3 class="c-heading-3">Section 1</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="exampleGlyphPivot1Target2" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 2</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="exampleGlyphPivot1Target3" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 3</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
</div>

Pivot (disabled)

<div class="c-pivot f-disabled" data-f-state="disabled">
    <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
    <div role="tablist">
        <a role="tab" tabindex="0" aria-controls="examplePivot2Target1">Pivot 1</a>
        <a role="tab" aria-controls="examplePivot2Target2">Pivot 2</a>
        <a role="tab" aria-controls="examplePivot2Target3">Pivot 3</a>
    </div>
    <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
    <section id="examplePivot2Target1" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 1</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="examplePivot2Target2" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 2</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
    <section id="examplePivot2Target3" role="tabpanel" aria-hidden="true">
        <h3 class="c-heading-3">Section 3</h3>
        <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
    </section>
</div>