Layout

App shell

Brand, breadcrumb bar, collapsible sidebar and main column.

The chrome around this page — the top bar (brand · breadcrumb · actions), the fixed collapsible sidebar, and the main column — is <.app_shell>, built from lantern-ui components. Slots: :brand (corner logo), :header (inline breadcrumbs/switchers), :actions (top-right), and :sidebar (nav_group / nav_item). The collapse control at the sidebar foot persists per id.

A real, interactive <.app_shell> — brand · breadcrumb · actions over a collapsible sidebar and a main column. Rendered in an iframe because app_shell is position: fixed; the collapse control at the sidebar foot works here too.

<.app_shell id="app">
  <:brand><.icon name="bolt" /> <span class="lui-brand-name">Acme</span></:brand>
  <:header><.breadcrumb>…</.breadcrumb></:header>
  <:actions><.button variant="outline" size="sm">Account</.button></:actions>

  <:sidebar>
    <.nav_group label="Workspace">
      <.nav_item label="Dashboard" icon="chart-bar" navigate={~p"/"} active />
      <.nav_item label="Buckets" icon="cloud" navigate={~p"/buckets"} />
    </.nav_group>
  </:sidebar>

  <%!-- page content --%>
</.app_shell>

Action bar

breadcrumb_bar with a trail plus :actions: trail left, actions right, one bar instead of a stacked breadcrumb and title row.

<.breadcrumb_bar>
  <.breadcrumb>
    <:item href="#">Workspace</:item>
    <:item href="#">Projects</:item>
    <:item current>enventory</:item>
  </.breadcrumb>
  <:actions label="Share">
    <.button size="sm" variant="outline">Share</.button>
  </:actions>
  <:actions label="New deploy">
    <.button size="sm">New deploy</.button>
  </:actions>
</.breadcrumb_bar>

Page header

A title, supporting description, and right-side actions compose the page header below the breadcrumb.

Overflow

Only the first :max_inline entries (default 2) are quick buttons; the rest fold into the More menu. The same fold applies to the quick buttons themselves as the bar narrows, so nothing becomes unreachable on small screens.

<.breadcrumb_bar>
  <.breadcrumb>
    <:item href="#">Workspace</:item>
    <:item current>foodfeed</:item>
  </.breadcrumb>
  <:actions label="Deploy">
    <.button size="sm">Deploy</.button>
  </:actions>
  <:actions label="Logs" phx-click="logs">
    <.button size="sm" variant="outline" phx-click="logs">Logs</.button>
  </:actions>
  <:actions label="Scale" phx-click="scale">
    <.button size="sm" variant="outline" phx-click="scale">Scale</.button>
  </:actions>
  <:actions label="Rollback" phx-click="rollback">
    <.button size="sm" variant="outline" phx-click="rollback">Rollback</.button>
  </:actions>
  <:actions label="Settings" phx-click="settings">
    <.button size="sm" variant="outline" phx-click="settings">Settings</.button>
  </:actions>
</.breadcrumb_bar>

Destructive entry

Put data-confirm on the :actions slot. A folded item renders from slot attrs and never its body, so a confirm placed only on an inner button is lost once the entry folds.

<.breadcrumb_bar>
  <.breadcrumb>
    <:item href="#">Workspace</:item>
    <:item current>skusync</:item>
  </.breadcrumb>
  <:actions label="Edit">
    <.button size="sm" variant="outline">Edit</.button>
  </:actions>
  <:actions label="Clone">
    <.button size="sm" variant="outline">Clone</.button>
  </:actions>
  <:actions
    label="Delete"
    phx-click="delete"
    data-confirm="Delete this project? This cannot be undone."
  >
    <.button
      size="sm"
      variant="outline"
      color="danger"
      phx-click="delete"
      data-confirm="Delete this project? This cannot be undone."
    >
      Delete
    </.button>
  </:actions>
</.breadcrumb_bar>

API reference

Props and slots, introspected from the component.

app_shell/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`collapsed`	`boolean`	`false`	Initial sidebar collapsed (icon-rail) state.
`id`*	`string`	`—`	stable id — the collapse state is persisted per id
Slots
`:actions`	top-right of the bar (user menu, etc.)
`:brand`*	logo/name, top-left corner
`:breadcrumb`	compact sticky trail under the appbar (pass <.breadcrumb>)
`:breadcrumb_actions`	Right-side actions on the breadcrumb bar (same region as breadcrumb_bar/1 :actions). Omitted when empty so existing call sites stay unchanged.
`:header`	inline context after the brand (switchers, etc.)
`:inner_block`*	Main content column.
`:sidebar`*	nav_group / nav_item
`:sidebar_footer`	Persistent links pinned below the nav and above the collapse control (support, docs, legal). Pass `nav_link/1`s. Hidden on the icon rail, where there is no room for text-only links.

nav_group/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`label`	`string`	`nil`	Group heading; hides when the rail is collapsed.
Slots
`:inner_block`*	nav_item children in this group.

nav_item/1

Prop	Type	Default	Description
`active`	`boolean`	`false`	Highlight as the current page.
`badge`	`any`	`nil`	A count or short marker for what is waiting behind this link. Sits at the end of the row, and shrinks to a dot on the collapsed rail. Pass `nil` for none — a badge reading `0` is a badge saying there is nothing to see.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`expanded`	`boolean`	`false`	Initial open state when a `:subnav` is present.
`href`	`string`	`nil`	External or full-page href; renders as a link.
`icon`	`string`	`nil`	Leading icon. A lantern icon-set name (e.g. `chart-bar`), or a host heroicon name (`hero-*`) rendered as a CSS-mask span so an app can keep its own icons.
`label`*	`string`	`—`	Nav label; becomes the collapsed-rail tooltip.
`navigate`	`string`	`nil`	LiveView navigate target; renders as a link.
`patch`	`string`	`nil`	LiveView patch target; renders as a link.
Slots
`:subnav`	Nested nav_items. When present the item becomes an expandable section.

breadcrumb_bar/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`id`	`string`	`nil`	Stable id for the overflow menu when multi-entry actions collapse; auto-generated when omitted.
`max_inline`	`integer`	`2`	How many entries render as quick buttons before the rest fold into the More menu.
Slots
`:actions`	Right-side actions. The first `:max_inline` entries render as quick buttons; the rest fold into a More menu.
`:inner_block`*	Usually a single <.breadcrumb>.

page_header/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`description`	`string`	`nil`	Optional supporting line under the title.
`title`	`string`	`nil`	Page heading.
Slots
`:actions`	Right-side actions (buttons, menus).
`:inner_block`	Optional body under the title row (rarely needed).