Navigation

Nav list

Grouped vertical navigation.

Vertical navigation — an optional heading plus links. Items render as navigate/patch/href links, or as a button when given phx-click. Mirrors Fluxon's navlist surface.

Headed list

heading + navlink items; active marks the current page, icon adds a leading glyph.

<.navlist heading="Workspace">
  <.navlink href="#" active>Dashboard</.navlink>
  <.navlink href="#" icon="folder">Projects</.navlink>
  <.navlink href="#" icon="adjustments-horizontal">Settings</.navlink>
  <.navheading>Account</.navheading>
  <.navlink href="#" icon="document">Profile</.navlink>
</.navlist>

API reference

Props and slots, introspected from the component.

navlist/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`heading`	`string`	`nil`	Optional top heading rendered above the links.
Slots
`:inner_block`*	navlink / navheading children.

navheading/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
Slots
`:inner_block`*	Heading label content.

navlink/1

Prop	Type	Default	Description
`active`	`boolean`	`false`	Highlight as the current page.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`href`	`string`	`nil`	External or full-page href; renders as a link.
`icon`	`string`	`nil`	Leading icon name from the icon set.
`navigate`	`string`	`nil`	LiveView navigate target; renders as a link.
`patch`	`string`	`nil`	LiveView patch target; renders as a link.
Slots
`:inner_block`*	Link or button label content.