Home
Components
Tabs

Tabs

Tab List

Use a tab list to toggle between sections of content. Use an <a> when tabs should link to a new URL or <button type="button"> when tabs should display different content on the same page with JS.

Use the data attribute data-active on a list item to denote the current tab.

Enclose the tab list in a container with .pv-expand and set the --expand custom property to the padding value of its parent to extend the bottom border to the edge of the parent.

Use .pv-tab-list-small to reduce the vertical padding of the tab list. (v2 only.)

Tab lists have flex built in, so you can optionally include an icon or other element within each list item without needing to add extra classes.

Example
Tab lists, using links and buttons in medium and small sizes.

.pv-tab-list

.pv-tab-list-small

HTML

<div class="pv-expand" style="--expand: 1rem">
  <ul role="list" class="pv-tab-list pv-inset-inline">
    <li data-active><a href="#">Contracts</a></li>
    <li><a href="#">Files</a></li>
    <li><a href="#">Language</a></li>
    <li><a href="#">Bookmarks</a></li>
  </ul>
</div>
<div class="pv-expand" style="--expand: 1rem">
  <ul role="list" class="pv-tab-list pv-inset-inline">
    <li data-active><button type="button">Contracts</button></li>
    <li><button type="button">Files</button></li>
    <li><button type="button">Language</button></li>
    <li><button type="button">Bookmarks</button></li>
  </ul>
</div>

Numbered Tab List

Use an ordered list with .pv-tab-list to include a number before the text of each tab. Use the data attribute data-active to indicate the active tab.

HTML

<div class="pv-border-bottom pv-expand" style="--expand: 1rem">
  <div class="pv-expand" style="--expand: 1rem">
    <ol role="list" class="pv-tab-list pv-inset-inline">
      <li data-active><a href="#">Patient</a></li>
      <li><a href="#">Rate</a></li>
      <li><a href="#">Provider</a></li>
      <li><a href="#">Guarantee</a></li>
    </ul>
  </div>
</div>

Completed Items

Use the data attribute data-complete to mark an inactive tab with a checkmark.

Example
Numbered tabs with completed items.

HTML

<div class="pv-border-bottom pv-expand" style="--expand: 1rem">
  <div class="pv-expand" style="--expand: 1rem">
    <ol role="list" class="pv-tab-list pv-inset-inline">
      <li data-complete><a href="#">Patient</a></li>
      <li data-complete><a href="#">Rate</a></li>
      <li data-active><a href="#">Provider</a></li>
      <li><a href="#">Guarantee</a></li>
    </ul>
  </div>
</div>