The page frame: a sidebar (which becomes a sheet on narrow screens), a sticky topbar, and the main area.

<.app_shell id="app">
  <:sidebar>
    <.sidebar brand="Acme" brand_href={~p"/"}>
      <.nav>
        <.nav_group label="Workspace">
          <.nav_item navigate={~p"/"} current={@live_action == :home}><.icon name="folder" /> Projects</.nav_item>
        </.nav_group>
      </.nav>
      <:footer><.button variant="ghost" size="sm">Sign out</.button></:footer>
    </.sidebar>
  </:sidebar>
  <:topbar>
    <.breadcrumbs>…</.breadcrumbs>
    <:end><.theme_toggle /></:end>
  </:topbar>
  Page content
</.app_shell>

The sidebar slot is rendered once for the desktop column and once inside a sheet for narrow viewports, so avoid ids inside it. Set --sl-sidebar-width and --sl-topbar-height to change the geometry.

Attributes

• id (:string) (required)
• width (:string) - content measure. Defaults to "default". Must be one of "default", "narrow", or "wide".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• sidebar
• topbar - Accepts attributes:
  • class (:any)
• inner_block (required)

A centred panel for sign-in, sign-up, and similar pages.

<.auth_layout title="Welcome back" description="Sign in to continue.">
  <:brand><.icon name="folder" /> Acme</:brand>
  <.form …>…</.form>
  <:footer>New here? <.link navigate={~p"/signup"}>Create an account</.link></:footer>
</.auth_layout>

Attributes

• title (:string) (required)
• description (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• brand
• inner_block (required)
• footer

Wraps a control with a dot or count marker, for notification buttons.

<.indicator count={3}><.button variant="ghost" icon aria-label="Notifications"><.icon name="bell" /></.button></.indicator>
<.indicator dot color="success"><.avatar name="Ada" /></.indicator>

Attributes

• count (:integer) - Defaults to nil.
• dot (:boolean) - Defaults to false.
• max (:integer) - Defaults to 99.
• color (:string) - Defaults to "danger". Must be one of "danger", "accent", or "success".
• label (:string) - accessible description of the marker, e.g. "3 unread". Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A navigation landmark holding groups of items.

Attributes

• label (:string) - accessible name; defaults to Main. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A collapsible navigation group on <details>, for nested sections.

<.nav_collapsible label="Settings" open={@page in ~w(profile billing)a}>
  <:icon><.icon name="cog" /></:icon>
  <.nav_item navigate={~p"/settings/profile"}>Profile</.nav_item>
</.nav_collapsible>

Attributes

• label (:string) (required)
• open (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon
• inner_block (required)

A labelled group of navigation items.

Attributes

• label (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A navigation link. current marks the active page with aria-current. A badge renders a count or status on the right.

<.nav_item navigate={~p"/inbox"} current={@page == :inbox} badge="12"><.icon name="inbox" /> Inbox</.nav_item>

Attributes

• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• href (:any) - Defaults to nil.
• current (:boolean) - Defaults to false.
• badge (:string) - Defaults to nil.
• badge_color (:string) - Defaults to "neutral".
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["method", "target"].

Slots

• inner_block (required)

The sidebar column: brand, navigation, and a footer pinned to the bottom.

Attributes

• brand (:string) - Defaults to nil.
• brand_href (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• logo - an icon or image rendered before the brand name.
• inner_block (required)
• footer

Topbar content helpers: put things at the end of the bar.

Attributes

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)