Seven Minute Tabs Web Component Demo

All visual styles shown here are decoupled from the component (completely optional: try removing demo-styles.css). Read more at the documentation on GitHub

Vanilla

  1. First tab
  2. Second tab
  3. Third tab
First tab content
Second tab content
Third tab content

Lots of tabs to test overflow at small widths

  1. First tab
  2. Second tab
  3. Third tab
  4. Fourth tab
  5. Fifth tab
  6. Sixth tab
First tab content
Second tab content
Third tab content
Fourth tab content
Fifth tab content
Sixth tab content

Tabs on bottom

First tab content
Second tab content
Third tab content
  1. First tab
  2. Second tab
  3. Third tab

Active tab syncs to group, persists across pageviews

  1. First tab
  2. Second tab
  3. Third tab
First tab content
Second tab content
Third tab content
  1. First tab
  2. Second tab
  3. Third tab
First tab content
Second tab content
Third tab content

Separate persist group:

  1. First tab
  2. Second tab
  3. Third tab
First tab content
Second tab content
Third tab content

Prune buttons that don’t have a matching panel (starts with three tab links)

First tab Second tab Third tab
First tab content
Second tab content

autoheight option

Unlocks consistent height when switching tabs.

First tab Second tab
First tab content
Second tab content



Super long tab content



Super long tab content



Super long tab content



Super long tab content

Text after the component (to show the height above without using CSS)