Routed tab-style navigation with responsive mobile collapse.

Unlike the full tabs component which manages content panels client-side, this component only renders navigation links. Each tab links to a different LiveView route, allowing heavy content (analytics, tables, etc.) to load only when active.

Features

• Visual-only route navigation (no content panel management)
• Server-side routing via LiveView patches
• Collapses to a mobile dropdown by default
• Desktop keyboard navigation (arrow keys, Home, End)
• Icon support via inner block
• Consistent styling across pages
• Permission-aware rendering (slots can be conditionally rendered)

Examples

<.tab_nav id="org-tabs">
  <:tab patch={~p"/orgs/#{@org.id}"} active={@active_tab == :show}>
    About
  </:tab>
  <:tab patch={~p"/orgs/#{@org.id}/members"} active={@active_tab == :members}>
    Members
  </:tab>
</.tab_nav>

# Keep tabs visible on small screens
<.tab_nav id="settings-tabs" collapse="never">
  <:tab patch={~p"/settings"} active={@active_tab == :profile}>
    Profile
  </:tab>
  <:tab patch={~p"/settings/billing"} active={@active_tab == :billing}>
    Billing
  </:tab>
</.tab_nav>

Permission-aware usage

<.tab_nav id="batch-tabs">
  <:tab patch={~p"/batches/#{@batch.id}"} active={@active_tab == :overview}>
    Overview
  </:tab>
  <%= if @can_manage do %>
    <:tab patch={~p"/batches/#{@batch.id}/settings"} active={@active_tab == :settings}>
      Settings
    </:tab>
  <% end %>
</.tab_nav>

Keyboard Navigation

Accessibility

• Uses semantic <nav> landmark navigation
• Active route links use aria-current="page"
• The mobile trigger controls a collapsed list of the same route links
• Arrow keys move focus between desktop links as a convenience enhancement
• All links remain in the normal tab order

Migrating from NavPills

SutraUI.NavPills was removed in favor of this component. Use tab_nav/1 for routed tab or pill navigation; it includes the responsive dropdown behavior by default.