Navigation

Tabs

Switch between sibling views.

Segmented or underline tab lists with server-driven active state; tabs given patch render as links so tab state can live in the URL.

Segmented with panels

Default segmented list; panels show based on the active assign.

First panel content.

<.tabs id="demo-tabs">
  <.tabs_list active_tab={@demo_tab}>
    <:tab name="one" phx-click="demo_tab">First <.badge size="sm">12</.badge></:tab>
    <:tab name="two" phx-click="demo_tab">Second</:tab>
    <:tab name="three" phx-click="demo_tab">Third</:tab>
  </.tabs_list>
  <.tabs_panel name="one" active={@demo_tab == "one"}>First panel content.</.tabs_panel>
  <.tabs_panel name="two" active={@demo_tab == "two"}>Second panel content.</.tabs_panel>
  <.tabs_panel name="three" active={@demo_tab == "three"}>Third panel content.</.tabs_panel>
</.tabs>

Underline variant

variant="underline" with size sm — good for page-level tabs.

Segmented

Standalone pill control with no panels. Give the list an id so LanternTabs handles arrow keys; pass role="radiogroup" when there is no tab panel.

<.tabs_list
  id="scope"
  variant="segmented"
  size="sm"
  active_tab={@scope}
  aria-label="View"
  role="radiogroup"
>
  <:tab name="all" phx-click="set_dense_scope">All</:tab>
  <:tab name="active" phx-click="set_dense_scope">Active</:tab>
  <:tab name="backlog" phx-click="set_dense_scope">Backlog</:tab>
</.tabs_list>

API reference

Props and slots, introspected from the component.

tabs_list/1

Prop	Type	Default	Description
`active_tab`	`string`	`nil`	Name of the currently selected tab.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`controlled`	`boolean`	`false`	Strict server-driven value even without `active_tab`.
`id`	`string`	`nil`	Stable id; required to mount `LanternTabs` for arrow-key activation.
`on_change`	`string`	`nil`	Server event pushed on selection (`lantern:tabs:set-value` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on selection.
`size`	`sm \| md`	`"md"`	Tab control density.
`variant`	`segmented \| underline`	`"segmented"`	segmented is pill-style; underline is text tabs.
Slots
`:inner_block`	Optional extra content inside the tab list.
`:tab`*	One tab trigger; link via patch/navigate/href or button via phx-click.

tabs_panel/1

Prop	Type	Default	Description
`active`	`boolean`	`false`	When true, the panel is rendered.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`name`*	`string`	`—`	Tab key this panel belongs to.
Slots
`:inner_block`*	Panel body content.