Tab Bar

iOS-style bottom navigation with icon+label items. Add the .tabbar modifier to a .footer to create mobile tab navigation.

Basic

Preview

<div style="position:relative; height:100%; background: var(--color-base-200);">
  <footer class="footer tabbar" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="tabbar-label">Home</span>
    </button>
    <button class="tabbar-item tabbar-item-active">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="tabbar-label">Search</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="tabbar-label">Alerts</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="tabbar-label">Profile</span>
    </button>
  </footer>
</div>

Requires: ux.min.css

<div style="position:relative; height:100%; background: var(--color-base-200);">
  <footer class="flex items-center shrink-0 border-t border-base-300 bg-base-100 p-0 gap-0 justify-stretch" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Home</span>
    </button>
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-100 text-primary cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Search</span>
    </button>
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Alerts</span>
    </button>
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Profile</span>
    </button>
  </footer>
</div>

Requires: tw.min.css

// Toggle active tab:
// document.querySelectorAll('.tabbar-item').forEach(item => {
//   item.addEventListener('click', () => {
//     document.querySelectorAll('.tabbar-item').forEach(i => i.classList.remove('tabbar-item-active'));
//     item.classList.add('tabbar-item-active');
//   });
// });

With Badges

Preview

<div style="position:relative; height:100%; background: var(--color-base-200);">
  <footer class="footer tabbar" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="tabbar-item tabbar-item-active">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="tabbar-label">Home</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" /></svg>
      <span class="tabbar-badge">3</span>
      <span class="tabbar-label">Chat</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="tabbar-badge-dot"></span>
      <span class="tabbar-label">Alerts</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="tabbar-label">Profile</span>
    </button>
  </footer>
</div>

Requires: ux.min.css

<div style="position:relative; height:100%; background: var(--color-base-200);">
  <footer class="flex items-center shrink-0 border-t border-base-300 bg-base-100 p-0 gap-0 justify-stretch" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="relative flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-100 text-primary cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Home</span>
    </button>
    <button class="relative flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" /></svg>
      <span class="absolute top-0.5 left-1/2 ml-1.5 min-w-4 h-4 px-1 text-[0.625rem] font-semibold leading-4 text-center rounded-full bg-error text-error-content">3</span>
      <span class="text-[0.625rem] font-medium leading-none">Chat</span>
    </button>
    <button class="relative flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="absolute top-1 left-1/2 ml-2 size-1.5 rounded-full bg-error"></span>
      <span class="text-[0.625rem] font-medium leading-none">Alerts</span>
    </button>
    <button class="relative flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Profile</span>
    </button>
  </footer>
</div>

Requires: tw.min.css

// Toggle active tab:
// document.querySelectorAll('.tabbar-item').forEach(item => {
//   item.addEventListener('click', () => {
//     document.querySelectorAll('.tabbar-item').forEach(i => i.classList.remove('tabbar-item-active'));
//     item.classList.add('tabbar-item-active');
//   });
// });

Glass

Preview

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); height: 100%; position: relative; border-radius: 0;">
  <footer class="footer tabbar glass" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="tabbar-item tabbar-item-active">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="tabbar-label">Home</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="tabbar-label">Search</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="tabbar-label">Profile</span>
    </button>
  </footer>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); height: 100%; position: relative; border-radius: 0;">
  <footer class="flex items-center shrink-0 bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border-t border-glass-border p-0 gap-0 justify-stretch" style="position:absolute; bottom:0; left:0; right:0;">
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-100 text-white cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Home</span>
    </button>
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Search</span>
    </button>
    <button class="flex flex-col items-center justify-center flex-1 min-w-0 gap-0.5 py-1 opacity-50 cursor-pointer bg-transparent border-none">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="text-[0.625rem] font-medium leading-none">Profile</span>
    </button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - glass comes from .footer.glass

Inside a Page

Preview

Scroll content here. The tab bar stays at the bottom as a sticky footer.

<div class="page" style="height: 300px;">
  <header class="header">
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <main class="content">
    <div class="p-4">
      <p class="text-base-content/60">Scroll content here. The tab bar stays at the bottom as a sticky footer.</p>
    </div>
  </main>
  <footer class="footer tabbar">
    <button class="tabbar-item tabbar-item-active">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="tabbar-label">Home</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="tabbar-label">Search</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="tabbar-label">Alerts</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="tabbar-label">Profile</span>
    </button>
  </footer>
</div>

Requires: ux.min.css

<!-- The tab bar is just a .footer with tabbar items — works naturally inside .page -->
<div class="page" style="height: 300px;">
  <header class="header">
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <main class="content">
    <div class="p-4">
      <p class="text-base-content/60">Scroll content here. The tab bar stays at the bottom as a sticky footer.</p>
    </div>
  </main>
  <footer class="footer tabbar">
    <button class="tabbar-item tabbar-item-active">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
      <span class="tabbar-label">Home</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      <span class="tabbar-label">Search</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      <span class="tabbar-label">Alerts</span>
    </button>
    <button class="tabbar-item">
      <svg class="tabbar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
      <span class="tabbar-label">Profile</span>
    </button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required for layout.
// The .footer inside .page is automatically sticky at the bottom.
// Toggle active state with JS:
// item.classList.add('tabbar-item-active');

Reference

Class	Description
.footer.tabbar	Modifier on .footer — resets padding/gap for tab items
.tabbar-item	Navigation button (flex column with icon + label)
.tabbar-item-active	Active item state
[aria-selected="true"]	Alternative active state (ARIA)
[data-state="active"]	Alternative active state (data-state)
.tabbar-icon	Icon inside an item (1.5rem)
.tabbar-label	Text label below icon
.tabbar-badge	Notification badge (number)
.tabbar-badge-dot	Dot indicator badge
.footer.glass	Glass variant (inherited from .footer)

Note: The .tabbar class is a modifier for .footer. Background, border, glass, and color variants all come from the .footer base class. Inside a .page, the footer is automatically sticky at the bottom.