Docs

Tabs

Organize and switch between related content sections.

<.tabs>
  <.tabs_list>
    <:tab class="flex-1" name="list">List</:tab>
    <:tab class="flex-1" name="grid">Grid</:tab>
    <:tab class="flex-1" name="table">Table</:tab>
  </.tabs_list>

  <.tabs_panel active name="list">List content</.tabs_panel>
  <.tabs_panel name="grid">Grid content</.tabs_panel>
  <.tabs_panel name="table">Table content</.tabs_panel>
</.tabs>

Variants

Choose from underlined, segmented, or ghost tab styles for your interface.

Segmented

Create a more defined, button-like appearance for tab navigation.

<.tabs>
  <.tabs_list variant="segmented">
    <:tab name="list">List</:tab>
    <:tab name="grid">Grid</:tab>
    <:tab name="table">Table</:tab>
  </.tabs_list>

  <.tabs_panel active name="list">List content</.tabs_panel>
  <.tabs_panel name="grid">Grid content</.tabs_panel>
  <.tabs_panel name="table">Table content</.tabs_panel>
</.tabs>

Ghost

Apply a minimal, unobtrusive style for subtle tab navigation.

<.tabs>
  <.tabs_list variant="ghost">
    <:tab name="list">List</:tab>
    <:tab name="grid">Grid</:tab>
    <:tab name="table">Table</:tab>
  </.tabs_list>

  <.tabs_panel active name="list">List content</.tabs_panel>
  <.tabs_panel name="grid">Grid content</.tabs_panel>
  <.tabs_panel name="table">Table content</.tabs_panel>
</.tabs>

Icons

Enhance tabs with icons alongside labels for clarity and visual appeal.

<.tabs>
  <.tabs_list>
    <:tab active name="list">
      <.icon name="hero-list-bullet" /> List
    </:tab>
    <:tab name="grid">
      <.icon name="hero-squares-2x2" /> Grid
    </:tab>
    <:tab name="table">
      <.icon name="hero-table-cells" /> Table
    </:tab>
  </.tabs_list>

  <.tabs_panel name="list" active>List content</.tabs_panel>
  <.tabs_panel name="grid">Grid content</.tabs_panel>
  <.tabs_panel name="table">Table content</.tabs_panel>
</.tabs>

Accessibility

The Tabs component follows the WAI-ARIA specs for the tabs pattern.

Keyboard support

Key Action
ArrowLeft when :tab is focused Navigates to the previous tab
ArrowRight when :tab is focused Navigates to the next tab
Home when :tab is focused Navigates to the first tab
End when :tab is focused Navigates to the last tab
Tab when :tab is focused Navigates to the next focusable element outside of the tablist