Introduction
Buttons
Data
Dialog
Feedback
Form
Layout
- App Bar
- Box
- Cluster
- Drawer
- Page Header
- Split Pane
- Stack
Media
Menu
Navigation

App Bar

The app bar is typically located at the top of the interface and provides access to key features and navigation options.

Usage

<.app_bar id="app-bar" title="Page title">
  <:navigation label="Open menu" on_click={JS.push("toggle-menu")}>
    <.icon><Lucideicons.menu aria-hidden /></.icon>
  </:navigation>
  <:action label="Search" on_click={JS.push("search")}>
    <.icon><Lucideicons.search aria-hidden /></.icon>
  </:action>
  <:action label="Like" on_click={JS.push("like")}>
    <.icon><Lucideicons.heart aria-hidden /></.icon>
  </:action>
</.app_bar>

Page title

Attribute	Type	Documentation	Default
class	:any	Any additional classes to be added. Read more Read less	[]
Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings.
Required id *	:string
rest	:global	Any additional HTML attributes.
title	:string	The page title. Will be set as `h1`.
action	:slot	Slot for action buttons right of the title.
Show slot attributes Hide slot attributes
Required label *	:string	The link's accessible name. Rendered as `aria-label` and as `title`, so an icon-only item is named and has a hover tooltip. If the content includes visible text, `label` must contain that text, since `aria-label` overrides the content.
Required on_click *	:any	Event name or `Phoenix.LiveView.JS` command.
navigation	:slot	Slot for a single button left of the title, typically used for a menu button that toggles a drawer, or for a back link.
Show slot attributes Hide slot attributes
Required label *	:string	The link's accessible name. Rendered as `aria-label` and as `title`, so an icon-only item is named and has a hover tooltip. If the content includes visible text, `label` must contain that text, since `aria-label` overrides the content.
Required on_click *	:any	Event name or `Phoenix.LiveView.JS` command.