This component is meant for tabs that link to a different view or live action, each with a distinct URL. If you want to render tabs that switch between in-page content panels, use tabs/1 instead.

Usage

<.tab_navigation current_value={@live_action}>
  <:item
    patch={~p"/pets/#{@pet}"}
    value={[:show, :edit]}
  >
    Profile
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/appointments"}
    value={:appointments}
  >
    Appointments
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/messages"}
    value={:messages}
  >
    Messages
  </:item>
</.tab_navigation>

Current Item

Each item has a value attribute that can be either a single value or a list of values. If you patch between live actions using this component, you would set the value to the list of live actions for which this tab is active.

The root element itself has a current_value attribute. To determine whether a tab item is active, the current value is compared with the value of the tab item. If the value is a list, the tab item is considered active if the current value is contained in that list.

Tab items are marked active by setting aria-current="page". You can select the item in CSS with .tab-navigation a[aria-current].