Navigation

Breadcrumb & pagination

Where you are, and paging through more.

Breadcrumb

Path navigation for file/tree UIs — a lantern-ui extension. Items render as links, event buttons, or the aria-current page.

Path

href / navigate / phx-click on intermediate items; current marks the page.

<.breadcrumb>
  <:item href="#">my-bucket</:item>
  <:item href="#">photos</:item>
  <:item href="#">2026</:item>
  <:item current>07-vacation</:item>
</.breadcrumb>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`aria_label`	`string`	`"Breadcrumb"`	Accessible name for the nav landmark.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`home`	`string`	`nil`	When set, renders a leading home-icon crumb linking here (product chrome).
`items`	`list`	`[]`	Optional list of %{label:, path: \| nil} maps (alternative to :item slots).
`separator`	`string`	`nil`	Optional text separator between items. Default is a chevron icon.
Slots
`:item`	One path segment; link, button, or current page.

Pagination

Pager + page-size control, duck-typed to Flop.Meta (no flop dependency) — all patch navigation. Fluxon has no equivalent; this replaces flop_phoenix's pager.

Basic

Pass a meta map (current_page, total_pages, page_size, total_count) and a patch_fn.

Edges & small sets

Prev is disabled on the first page, next on the last; few pages drop the gaps.

<.pagination meta={%{current_page: 1, total_pages: 8, page_size: 25, total_count: 190}} patch_fn={pf} />
<.pagination meta={%{current_page: 3, total_pages: 3, page_size: 25, total_count: 62}} patch_fn={pf} />

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`id`	`string`	`"pagination"`	Base id for the page-size dropdown.
`meta`*	`map`	`—`	Flop.Meta or any map with current_page/total_pages/page_size/total_count
`on_change`	`string`	`nil`	Server event pushed on page selection (`lantern:pagination:set-page` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on page selection.
`page_size_options`	`list`	`[10, 25, 50, 100]`	Choices in the page-size menu.
`patch_fn`*	`any`	`—`	fn %{page: n} \| %{page: 1, page_size: s} -> path
`show_page_size`	`boolean`	`true`	Show the page-size dropdown control.
`sibling_count`	`integer`	`1`	Page numbers shown on each side of current.