- 1.5.0

Tab Navigation

Renders navigation tabs.

Read more Read less

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.

Maturity: Refining

Usage

<.tab_navigation current_value={@live_action} label="Dog Profile Sections">
  <: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].

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required current_value * :any

The current value used to compare the item values with. If you use this

 Read more Read less

component to patch between different view actions, this should be the @live_action attribute.
label :string

Aria label for the <nav> element. The label is especially important if

 Read more Read less

you have multiple <nav> elements on the same page, since it allows users to differentiate between different navigation sections.

If the page is localized, ensure that the label is translated. Avoid using the word "navigation" in the label, since screen readers will already announce the "navigation" role. Additionally, the label should begin with a capital letter to ensure the correct inflection when read by screen readers.

Do not repeat the word navigation in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this navigation.

 Read more Read less

Set either this attribute or label.
rest :global

Any additional HTML attributes.
Required item * :slot
Show slot attributes Hide slot attributes
href :string

Passed to Phoenix.Component.link/1.
navigate :string

Passed to Phoenix.Component.link/1.
patch :string

Passed to Phoenix.Component.link/1.
Required value * :any

The value of the item is compared to the current_value attribute to determine whether to add the aria-current attribute. This can be a single value or a list of values, e.g. multiple live actions for which the item should be marked as current.

 
<:item patch="/owners" value={:owners}>Owners</:item>
<:item patch="/pets" value={:pets}>Pets</:item>
<:item patch="/appointments" value={:appointments}>Appointments</:item>