Tabs

Copy-paste ready tab navigation components

← Back to Home

⚡ Interactive Tabs (Stimulus)

Click the tabs to see them switch dynamically! Includes both the HTML and Stimulus controller.

Profile Information

This is your profile settings. You can update your name, email, and avatar here.

ERB + Stimulus 
<!-- HTML -->
<div data-controller="tabs">
  <nav class="flex space-x-8">
    <a href="#" 
       data-tabs-target="tab" 
       data-action="click->tabs#switch"
       class="border-b-2 border-blue-500 py-4 px-1 text-sm font-medium text-blue-600">
      Profile
    </a>
    <a href="#" 
       data-tabs-target="tab" 
       data-action="click->tabs#switch"
       class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500">
      Settings
    </a>
  </nav>
  
  <div data-tabs-target="panel">
    <!-- Panel 1 content -->
  </div>
  
  <div data-tabs-target="panel" class="hidden">
    <!-- Panel 2 content -->
  </div>
</div>
JavaScript (app/javascript/controllers/tabs_controller.js) 
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["tab", "panel"]

  connect() {
    if (this.tabTargets.length > 0) {
      this.showTab(0)
    }
  }

  switch(event) {
    event.preventDefault()
    const clickedTab = event.currentTarget
    const index = this.tabTargets.indexOf(clickedTab)
    
    if (index !== -1) {
      this.showTab(index)
    }
  }

  showTab(index) {
    // Update tab styles
    this.tabTargets.forEach((tab, i) => {
      const isActive = i === index
      tab.classList.toggle("border-blue-500", isActive)
      tab.classList.toggle("text-blue-600", isActive)
      tab.classList.toggle("border-transparent", !isActive)
      tab.classList.toggle("text-gray-500", !isActive)
    })
    
    // Show/hide panels
    this.panelTargets.forEach((panel, i) => {
      panel.hidden = i !== index
    })
  }
}

Basic Tabs (Underline)

Classic underline style tabs

Profile content goes here...

HTML 
<div class="border-b border-gray-200">
  <nav class="flex space-x-8">
    <a href="#" class="border-b-2 border-blue-500 py-4 px-1 text-sm font-medium text-blue-600">
      Profile
    </a>
    <a href="#" class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
      Settings
    </a>
    <a href="#" class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
      Notifications
    </a>
  </nav>
</div>

Pills Tabs

Rounded pill-style tabs

Overview content goes here...

HTML 
<nav class="flex space-x-2">
  <a href="#" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-full">
    Overview
  </a>
  <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-full">
    Analytics
  </a>
  <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-full">
    Reports
  </a>
</nav>

Boxed Tabs

Tabs with box background

Dashboard content goes here...

HTML 
<nav class="flex space-x-2 bg-gray-100 p-1 rounded-lg">
  <a href="#" class="flex-1 px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white rounded-md shadow">
    Dashboard
  </a>
  <a href="#" class="flex-1 px-4 py-2 text-sm font-medium text-center text-gray-600 hover:text-gray-900 rounded-md">
    Team
  </a>
  <a href="#" class="flex-1 px-4 py-2 text-sm font-medium text-center text-gray-600 hover:text-gray-900 rounded-md">
    Projects
  </a>
</nav>

Tabs with Icons

Add icons to your tabs

Profile content goes here...

HTML 
<nav class="flex space-x-8">
  <a href="#" class="border-b-2 border-blue-500 py-4 px-1 inline-flex items-center text-sm font-medium text-blue-600">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
    Profile
  </a>
  <a href="#" class="border-b-2 border-transparent py-4 px-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
    Settings
  </a>
</nav>

Tabs with Badges

Show counts or status with badges

Messages content goes here...

HTML 
<nav class="flex space-x-2">
  <a href="#" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-full inline-flex items-center">
    Messages
    <span class="ml-2 px-2 py-0.5 text-xs font-bold bg-white text-blue-600 rounded-full">12</span>
  </a>
  <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-full inline-flex items-center">
    Tasks
    <span class="ml-2 px-2 py-0.5 text-xs font-bold bg-red-100 text-red-600 rounded-full">3</span>
  </a>
</nav>

Vertical Tabs

Vertical sidebar-style tabs

General settings content goes here...

HTML 
<div class="flex">
  <nav class="flex flex-col space-y-1 w-48 border-r border-gray-200 pr-6">
    <a href="#" class="px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-md">
      General
    </a>
    <a href="#" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">
      Security
    </a>
    <a href="#" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">
      Integrations
    </a>
  </nav>
  <div class="flex-1 ml-6">
    <p>Content goes here...</p>
  </div>
</div>

Full Width Tabs

Tabs that span the full container width

Overview content goes here...

HTML 
<nav class="grid grid-cols-4 gap-0 border-b border-gray-200">
  <a href="#" class="border-b-2 border-blue-500 py-4 text-center text-sm font-medium text-blue-600">
    Overview
  </a>
  <a href="#" class="border-b-2 border-transparent py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
    Details
  </a>
  <a href="#" class="border-b-2 border-transparent py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
    History
  </a>
  <a href="#" class="border-b-2 border-transparent py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
    Settings
  </a>
</nav>

Tabs with Separator

Tabs with dividers between items

Day view content goes here...

HTML 
<nav class="flex divide-x divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
  <a href="#" class="flex-1 px-4 py-2 text-center text-sm font-medium text-white bg-blue-600">
    Day
  </a>
  <a href="#" class="flex-1 px-4 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50">
    Week
  </a>
  <a href="#" class="flex-1 px-4 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50">
    Month
  </a>
  <a href="#" class="flex-1 px-4 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50">
    Year
  </a>
</nav>

Scrollable Tabs

Horizontally scrollable tabs for many items

Dashboard content goes here...

HTML 
<div class="border-b border-gray-200 overflow-x-auto">
  <nav class="flex space-x-8 min-w-max">
    <a href="#" class="border-b-2 border-blue-500 py-4 px-1 text-sm font-medium text-blue-600 whitespace-nowrap">
      Dashboard
    </a>
    <a href="#" class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
      Team Members
    </a>
    <!-- More tabs... -->
  </nav>
</div>