Tab Nav Demo

Basic Usage

Click tabs to switch content. Keyboard: Arrow keys, Home, End.

Overview

Welcome to the overview panel. This is the default tab content.

Features

Here you can see all the amazing features of this component.

Keyboard navigation
ARIA accessibility
Smooth transitions

Documentation

Read the full documentation for usage examples and API reference.

Click a tab...

<tab-nav>
  <tab-panel label="Overview">
    <h3>Overview</h3>
    <p>Welcome to the overview panel. This is the default tab content.</p>
  </tab-panel>
  <tab-panel label="Features">
    <h3>Features</h3>
    <p>Here you can see all the amazing features of this component.</p>
    <ul>
      <li>Keyboard navigation</li>
      <li>ARIA accessibility</li>
      <li>Smooth transitions</li>
    </ul>
  </tab-panel>
  <tab-panel label="Documentation">
    <h3>Documentation</h3>
    <p>Read the full documentation for usage examples and API reference.</p>
  </tab-panel>
</tab-nav>

Pre-selected Tab

Start with a specific tab selected.

First tab content

This tab starts selected!

Third tab content

<tab-nav selected="1">
  <tab-panel label="First">First tab content</tab-panel>
  <tab-panel label="Second (Selected)">This tab starts selected!</tab-panel>
  <tab-panel label="Third">Third tab content</tab-panel>
</tab-nav>

With Icons

Add icons to tabs using the icon attribute.

Home panel with house icon.

Settings panel with gear icon.

Profile panel with person icon.

<tab-nav>
  <tab-panel label="Home" icon="🏠">
    <p>Home panel with house icon.</p>
  </tab-panel>
  <tab-panel label="Settings" icon="⚙️">
    <p>Settings panel with gear icon.</p>
  </tab-panel>
  <tab-panel label="Profile" icon="👤">
    <p>Profile panel with person icon.</p>
  </tab-panel>
</tab-nav>

Disabled Tab

Disable specific tabs.

This tab works normally.

You can't access this content.

This tab also works.

<tab-nav>
  <tab-panel label="Active Tab">This tab works normally.</tab-panel>
  <tab-panel label="Disabled" disabled>You can't access this content.</tab-panel>
  <tab-panel label="Another Active">This tab also works.</tab-panel>
</tab-nav>

Fill Width

Tabs fill available width equally.

Content for tab 1

Content for tab 2

Content for tab 3

<tab-nav fill>
  <tab-panel label="Tab 1">Content for tab 1</tab-panel>
  <tab-panel label="Tab 2">Content for tab 2</tab-panel>
  <tab-panel label="Tab 3">Content for tab 3</tab-panel>
</tab-nav>

Bottom Position

Tabs at the bottom of the content.

Content A with tabs below.

Content B with tabs below.

<tab-nav position="bottom">
  <tab-panel label="Panel A">Content A with tabs below.</tab-panel>
  <tab-panel label="Panel B">Content B with tabs below.</tab-panel>
</tab-nav>

Left Position

Vertical tabs on the left.

General settings panel.

Security settings panel.

Privacy settings panel.

<tab-nav position="left" style="height: 200px;">
  <tab-panel label="General">General settings panel.</tab-panel>
  <tab-panel label="Security">Security settings panel.</tab-panel>
  <tab-panel label="Privacy">Privacy settings panel.</tab-panel>
</tab-nav>

Programmatic Control

Control tabs with JavaScript.

Content 0

Content 1

Content 2

<tab-nav id="programmatic">
  <tab-panel label="Tab 0">Content 0</tab-panel>
  <tab-panel label="Tab 1">Content 1</tab-panel>
  <tab-panel label="Tab 2">Content 2</tab-panel>
</tab-nav>

<script>
  const tabNav = document.getElementById('programmatic');
  tabNav.select(1); // Select Tab 1
</script>

Custom Styling

Theme with CSS custom properties.

Amber themed tab content.

Custom styled tabs.

<tab-nav style="
  --tab-bg: #fef3c7;
  --tab-border: #f59e0b;
  --tab-text: #92400e;
  --tab-active-text: #78350f;
  --tab-active-border: #d97706;
  --tab-hover-bg: #fde68a;
">
  <tab-panel label="Amber">Amber themed tab content.</tab-panel>
  <tab-panel label="Theme">Custom styled tabs.</tab-panel>
</tab-nav>