SutraUI.TabNav (Sutra UI v0.2.0)

Visual tab navigation component for server-side routed tabs.

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

Features

Visual-only tab navigation (no content panel management)
Server-side routing via LiveView patches
Full 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>

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

Key	Action
`ArrowLeft`	Move to previous tab
`ArrowRight`	Move to next tab
`Home`	Move to first tab
`End`	Move to last tab
`Enter` / `Space`	Navigate to focused tab

Accessibility

Uses role="tablist" for the container
Uses role="tab" for each tab trigger
aria-selected indicates active tab
tabindex management for roving focus
Active tab marked with aria-selected="true"

Summary

Functions

tab_nav(assigns)

Renders a visual tab navigation bar.

Functions

tab_nav(assigns)

Renders a visual tab navigation bar.

Attributes

id (required) - Unique identifier for the tab navigation (required for keyboard nav)
class - Optional additional CSS classes for the container
label - Accessible label for the tablist (default: "Tab navigation")

Slots

tab (required) - Tab definitions with patch URL and active state
- patch (required) - LiveView route to navigate to
- active (required) - Boolean indicating if this tab is currently active
- Inner block can contain icons and text

Attributes

id (:string) (required) - Unique identifier (required for keyboard navigation).
class (:string) - Additional CSS classes for the container. Defaults to nil.
label (:string) - Accessible label for the tablist. Defaults to "Tab navigation".

Slots

tab (required) - Tab definitions. Accepts attributes:
- patch (:string) (required) - LiveView patch URL.
- active (:boolean) (required) - Whether this tab is active.