A breadcrumb trail. Renders a <nav> wrapping an ordered list; the final crumb is a plain element with aria-current="page" (never a link to the page you are already on). Long trails truncate with an ellipsis via CSS rather than wrapping.

Examples

<.breadcrumbs>
  <:crumb navigate={~p"/"}>Home</:crumb>
  <:crumb navigate={~p"/docs"}>Docs</:crumb>
  <:crumb>Navigation</:crumb>
</.breadcrumbs>

Attributes

• label (:string) - accessible name for the <nav> landmark. Defaults to "Breadcrumb".
• Global attributes are accepted.

Slots

• crumb (required) - one path segment; the last is the current page. Accepts attributes:
  • navigate (:string)
  • patch (:string)
  • href (:string)

Top navigation bar with a brand region, primary links, and trailing actions.

On narrow viewports the links collapse behind a native <details> disclosure, so the toggle works with zero JavaScript and needs no phx-update="ignore". On wide viewports CSS forces the panel open and hides the toggle. Mark the active link with current so it renders aria-current="page".

Examples

<.navbar id="site-nav">
  <:brand><.link navigate={~p"/"}>Aurora</.link></:brand>
  <:link navigate={~p"/"} current>Home</:link>
  <:link navigate={~p"/docs"}>Docs</:link>
  <:actions><.button>Sign in</.button></:actions>
</.navbar>

Attributes

• id (:string) - id for the mobile disclosure; generated when omitted. Defaults to nil.
• label (:string) - accessible name for the <nav> landmark. Defaults to "Primary".
• toggle_label (:string) - accessible name for the mobile disclosure toggle. Defaults to "Menu".
• Global attributes are accepted.

Slots

• brand - logo / wordmark, rendered at the inline-start edge.
• link - primary navigation links. Accepts attributes:
  • navigate (:string)
  • patch (:string)
  • href (:string)
  • current (:boolean) - marks this link as the current page.
• actions - trailing actions (buttons, avatar, theme toggle).

Numbered pagination with previous/next controls and truncated ranges (1 … 4 5 6 … 20). The current page is a plain element with aria-current="page"; disabled prev/next ends are non-focusable aria-disabled spans. Supply path to build hrefs, or forward phx-click through the global attrs and read phx-value-page on each control.

Examples

<.pagination page={@page} total_pages={@pages} path={&~p"/list?page=#{&1}"} />

Attributes

• page (:integer) (required) - the current 1-based page.
• total_pages (:integer) (required) - total number of pages.
• siblings (:integer) - pages to show on each side of the current page. Defaults to 1.
• label (:string) - Defaults to "Pagination".
• path (:any) - 1-arity function page -> href; when omitted, pass phx-* via :rest for click handling. Defaults to nil.
• prev_label (:string) - Defaults to "Previous".
• next_label (:string) - Defaults to "Next".
• Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-target"].

Vertical navigation rail with optional labelled sections. Compose it from sidebar_item/1 for leaf links and sidebar_group/1 for collapsible groups.

Responsive / off-canvas

The sidebar renders as a plain in-flow <nav>. For an off-canvas layout on small screens, place it inside the drawer component (or any container you toggle with aria-expanded) — the sidebar itself stays presentation-agnostic so it works equally as a persistent rail or a slide-in panel.

Examples

<.sidebar label="Docs">
  <:section label="Getting started">
    <.sidebar_item navigate={~p"/install"} current>Install</.sidebar_item>
    <.sidebar_item navigate={~p"/theming"}>Theming</.sidebar_item>
  </:section>
  <.sidebar_group label="Components">
    <.sidebar_item navigate={~p"/components/button"}>Button</.sidebar_item>
  </.sidebar_group>
</.sidebar>

Attributes

• label (:string) - accessible name for the <nav> landmark. Defaults to "Sidebar".
• Global attributes are accepted.

Slots

• section - a labelled group of items. Accepts attributes:
  • label (:string) - optional section heading.
• inner_block - items placed outside any section (use sidebar_item/group).

A collapsible group of sidebar items built on native <details> — the disclosure state is keyboard-operable with no JavaScript. The summary is a real button-like control and exposes its expanded state to assistive tech.

Attributes

• label (:string) (required) - the group trigger label.
• open (:boolean) - initial expanded state. Defaults to true.
• Global attributes are accepted.

Slots

• icon - decorative leading icon.
• inner_block (required) - sidebar_item/1 children.

A single sidebar link. Renders inside a list item so grouping stays semantic. Set current to expose aria-current="page".

Attributes

• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• href (:string) - Defaults to nil.
• current (:boolean) - marks the item as the current page. Defaults to false.
• Global attributes are accepted.

Slots

• icon - decorative leading icon.
• inner_block (required)

A visually-hidden-until-focused link that lets keyboard users jump past repeated navigation to the page's main content. Place it as the first focusable element in the document and point it at your <main id="main">.

Examples

<.skip_link href="#main">Skip to content</.skip_link>

Attributes

• href (:string) - fragment id of the main landmark. Defaults to "#main".
• Global attributes are accepted.

Slots

• inner_block - link text; defaults to "Skip to content".

A process stepper. Steps derive their state (complete/current/upcoming) from current, or you can override any step with an explicit status. The active step carries aria-current="step"; completed steps announce "completed" to assistive tech and show a check. Supports horizontal and vertical orientation via logical properties, so it mirrors correctly in RTL.

Examples

<.steps current={2}>
  <:step label="Account" description="Create your account" />
  <:step label="Profile" description="Add your details" />
  <:step label="Done" />
</.steps>

Attributes

• current (:integer) - 1-based index of the current step. Defaults to 1.
• orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• label (:string) - Defaults to "Progress".
• Global attributes are accepted.

Slots

• step (required) - one step in the process. Accepts attributes:
  • label (:string) (required)
  • description (:string) - optional supporting line under the label.

  • status (:string) - override: complete | current | upcoming.