Tabs

New

Overview

Tab component that is designed to patch or navigate within or between LiveViews.

This tabs component assumes that:

Changing tabs performs navigation.
The URL, rather than a component assign, is the source of truth for the selected tab.

This is the right behavior for most tab interfaces. Tab state usually needs to survive a refresh or deploy, which simple assigns that conditionally change the displayed content do not support.

If you need assign-backed tab state instead, you can extend this component with that option.

Overview Activity Settings

This is a third page!

HEEx

<Tabs.tabs id="example-tabs" label="Project information" selected={Atom.to_string(@selected_tab)}>
  <:tab
    value="overview"
    label="Overview"
    patch={@tab_path <> "?tab=overview"}
  >
    This is a page
  </:tab>
  <:tab
    value="activity"
    label="Activity"
    patch={@tab_path <> "?tab=activity"}
  >
    This is a different page
  </:tab>
  <:tab
    value="settings"
    label="Settings"
    patch={@tab_path <> "?tab=settings"}
  >
    This is a third page!
  </:tab>
</Tabs.tabs>

Sizes

Use size=sm for compact controls. Omit size to use the default.

Overview Activity Settings

Project settings.

Overview Activity Settings

Tabs use the default size when size is omitted.

Project settings.

HEEx

<div class="grid gap-6">
  <Tabs.tabs
    id="example-tabs-small"
    label="Small project information"
    selected={Atom.to_string(@selected_tab)}
    size={:sm}
  >
    <:tab value="overview" label="Overview" patch={@tab_path <> "?tab=overview"}>
      Small tabs fit compact controls and constrained layouts.
    </:tab>
    <:tab value="activity" label="Activity" patch={@tab_path <> "?tab=activity"}>
      Recent project activity.
    </:tab>
    <:tab value="settings" label="Settings" patch={@tab_path <> "?tab=settings"}>
      Project settings.
    </:tab>
  </Tabs.tabs>

  <Tabs.tabs
    id="example-tabs-default"
    label="Default project information"
    selected={Atom.to_string(@selected_tab)}
  >
    <:tab value="overview" label="Overview" patch={@tab_path <> "?tab=overview"}>
      Tabs use the default size when <code>size</code> is omitted.
    </:tab>
    <:tab value="activity" label="Activity" patch={@tab_path <> "?tab=activity"}>
      Recent project activity.
    </:tab>
    <:tab value="settings" label="Settings" patch={@tab_path <> "?tab=settings"}>
      Project settings.
    </:tab>
  </Tabs.tabs>
</div>

Accessibility

Tabs implements the expected tab list roles, selection state, focus management, and keyboard navigation. The following references were consulted during this component’s construction:

References

Add this module

terminal

mix dizzy.add tabs

Component API

Tabs.tabs

Attributes

Attributes for Tabs.tabs
Name	Type	Default	Values
`id`	`:string`	Required	—
`label`	`:string`	Required	—
`selected`	`:string`	Required	—
`size`	`:atom`	:md	:sm, :md

Slots

Slots for Tabs.tabs
Name	Required
`tab`	Required

Tab slot attributes

Attributes for the tab slot in Tabs.tabs
Name	Type	Default	Values
`value`	`:string`	Required	—
`label`	`:string`	Required	—
`patch`	`:string`	Required	—

JavaScript hook

.DizzyTabs

The colocated hook handles arrow keys, Home, and End, including right-to-left navigation. It activates patch links from the keyboard. LiveView handles navigation and the selected assign controls the active panel.

mix dizzy.add includes the hook and performs any required asset setup automatically.