Browse Components
Tabs
Switch between related views without leaving the page.
Basic
Arrow keys switch views. Tab moves into the active panel. All content stays readable without JavaScript.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<div class="tabs" data-tabs>
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Underline
Use tabs-line for a quieter selected indicator.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<div class="tabs tabs-line" data-tabs>
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Manual activation
Arrow keys move focus. Press Enter or Space to display the focused panel.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<div class="tabs" data-tabs data-activation="manual">
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Vertical
Up and Down move between tabs; Home and End move to the first and last.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<div class="tabs" data-tabs data-orientation="vertical">
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Unavailable tab
The unavailable view stays disabled. Explain the reason outside the tab.
Settings are unavailable in this read-only example.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<p>
Settings are unavailable in this read-only example.
</p>
<div class="tabs" data-tabs>
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
data-tab-disabled
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Right-to-left
Horizontal arrow keys follow the reading direction.
סקירה כללית
רכזו את העבודה ואת הצעדים הבאים במקום אחד.
פעילות אחרונה
הצוות פרסם את סקירת העיצוב הראשונה.
הגדרות הפרויקט
בחרו את ההגדרות המתאימות לתהליך העבודה שלכם.
View Code
<div class="tabs" data-tabs dir="rtl" lang="he">
<div class="tab-list" aria-label="מידע על הפרויקט">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
סקירה כללית
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
פעילות
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
הגדרות
</button>
</div>
<section class="stack" id="project-overview">
<h3>
סקירה כללית
</h3>
<p>
רכזו את העבודה ואת הצעדים הבאים במקום אחד.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
פעילות אחרונה
</h3>
<p>
הצוות פרסם את סקירת העיצוב הראשונה.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
הגדרות הפרויקט
</h3>
<p>
בחרו את ההגדרות המתאימות לתהליך העבודה שלכם.
</p>
</section>
</div>Without motion
Use data-motion=none to disable transitions locally. Reduced-motion preferences are also respected.
Project overview
Keep the work, people, and next steps in one place.
Recent activity
Your team has published the first design review.
Project settings
Choose the preferences that fit your workflow.
View Code
<div class="tabs" data-tabs data-motion="none">
<div class="tab-list" aria-label="Project information">
<button
type="button"
id="project-overview-tab"
aria-controls="project-overview"
disabled
>
Overview
</button>
<button
type="button"
id="project-activity-tab"
aria-controls="project-activity"
disabled
>
Activity
</button>
<button
type="button"
id="project-settings-tab"
aria-controls="project-settings"
disabled
>
Settings
</button>
</div>
<section class="stack" id="project-overview">
<h3>
Project overview
</h3>
<p>
Keep the work, people, and next steps in one place.
</p>
</section>
<section class="stack" id="project-activity">
<h3>
Recent activity
</h3>
<p>
Your team has published the first design review.
</p>
</section>
<section class="stack" id="project-settings">
<h3>
Project settings
</h3>
<p>
Choose the preferences that fit your workflow.
</p>
</section>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/tabs.css">
<link rel="stylesheet" href="/library/assets/select.css">
<link rel="stylesheet" href="/library/assets/section-nav.css">
<script defer src="/library/assets/tabs.js"></script>
<script defer src="/library/assets/select.js"></script>
<script defer src="/library/assets/section-nav.js"></script>17,000 bytes CSS including base · 16,360 bytes runtime JavaScript
Usage
Navigate page sections
For sections that remain visible, use section-nav with native links and section-target IDs. Add data-mobile=select for the mobile dropdown. Try the full-page example below the panel examples.
Group related views
Use tabs for alternate panels. Keep ordinary links for page navigation or jumping between visible sections.
Connect each panel
Match each button’s aria-controls to a unique panel ID. Load the tabs script once; without it, all panels remain readable.
Choose the behavior
Arrow keys move between tabs. Use data-activation="manual" to require Enter or Space before switching panels. Home and End move to the first and last tab.
Make it yours
Use .tabs-line for an underline or data-orientation="vertical" for a vertical list. Shared motion respects reduced-motion preferences.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.