Tab Nav

Unlike the full tabs component which manages content panels client-side, Tab Nav only provides the visual tab navigation. Each tab links to a different LiveView route, allowing heavy content to load only when active.

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

Usage

Tab Nav uses patch for LiveView navigation, keeping the socket connection alive.

# In your LiveView
def mount(%{"id" => id}, _session, socket) do
  {:ok, assign(socket, org: get_org(id), active_tab: :about)}
end

# In the template
<.tab_nav>
  <:tab patch={~p"/orgs/#{@org.id}"} active={@active_tab == :about}>
    About
  </:tab>
  <:tab patch={~p"/orgs/#{@org.id}/members"} active={@active_tab == :members}>
    Members
  </:tab>
</.tab_nav>

With Icons

Include icons alongside text in the tab inner block.

<.tab_nav>
  <:tab patch={~p"/about"} active={true}>
    <.icon name="lucide-info" class="size-4 mr-2" />
    About
  </:tab>
  <:tab patch={~p"/members"} active={false}>
    <.icon name="lucide-users" class="size-4 mr-2" />
    Members
  </:tab>
</.tab_nav>

When to Use

Tab Nav is ideal for scenarios where:

• Each tab loads different data from the server
• Tab content is heavy (analytics, tables, charts)
• You want separate URLs for each tab for bookmarking
• Content should only load when the tab is active

Accessibility

Tab Nav provides visual tab styling. For full keyboard navigation and ARIA support, use the Tabs component.