- 1.5.0

Left Menu

Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

Additional CSS classes
size :string

Menu size variant
"md"
active :string

Active data item id; pass explicitly to slotted groups
""
groups :list

Menu group maps with id, label, open and items
[]
brand :map

Brand map with label, icon, to and version
footer_text :string

Fixed footer text hidden in the icon rail
sticky :boolean

Own a persistent, collapsible child LiveView
false
socket :any

Parent LiveView socket, required in sticky mode
nav_label :string

Accessible label for the menu nav
"Navigation menu"
collapsible :boolean

Enable the client-owned icon rail and toggle
false
collapsed :boolean

Initial collapsed state, or authoritative state when collapse_controlled is enabled
false
collapse_controlled :boolean

Apply host-owned collapsed updates instead of localStorage preferences
false
collapse_event :string

Optional bubbling CustomEvent name for user toggles; detail contains id and collapsed
storage_key :string

Optional localStorage key for collapse state
expand_label :string

Accessible expand button label
"Expand navigation"
collapse_label :string

Accessible collapse button label
"Collapse navigation"
rest :global
header :slot

Fixed brand/header area outside the scrolling menu

 
<:header><strong data-left-menu-label>Workspace</strong></:header>
footer :slot

Fixed footer content above the built-in collapse toggle

 
<:footer><span data-left-menu-label>Account settings</span></:footer>
title :slot

Menu title displayed as a section heading
Show slot attributes Hide slot attributes
class :any

title CSS classes

 
<:menu>
  <.dm_left_menu_group id="storybook-left-overview" active="dashboard">
    <:title>Overview</:title>
    <:menu id="dashboard" to="#dashboard" icon="view-dashboard" label="Dashboard">Dashboard</:menu>
    <:menu id="projects" to="#projects" icon="folder" label="Projects">Projects</:menu>
    <:menu id="team" to="#team" icon="account-group" label="Team">Team</:menu>
    <:menu id="services" disabled icon="cog" label="Services">Services <span>Requires scope</span></:menu>
  </.dm_left_menu_group>
  <.dm_left_menu_group id="storybook-left-settings" open={false}>
    <:title>Settings</:title>
    <:menu id="profile" to="#profile" icon="account" label="Profile">Profile</:menu>
    <:menu id="security" to="#security" icon="shield-lock" label="Security">Security</:menu>
    <:menu id="billing" to="#billing" icon="credit-card" label="Billing">Billing</:menu>
  </.dm_left_menu_group>
</:menu>
menu :slot

Menu content, typically dm_left_menu_group components

 
<:menu>
  <.dm_left_menu_group id="storybook-left-overview" active="dashboard">
    <:title>Overview</:title>
    <:menu id="dashboard" to="#dashboard" icon="view-dashboard" label="Dashboard">Dashboard</:menu>
    <:menu id="projects" to="#projects" icon="folder" label="Projects">Projects</:menu>
    <:menu id="team" to="#team" icon="account-group" label="Team">Team</:menu>
    <:menu id="services" disabled icon="cog" label="Services">Services <span>Requires scope</span></:menu>
  </.dm_left_menu_group>
  <.dm_left_menu_group id="storybook-left-settings" open={false}>
    <:title>Settings</:title>
    <:menu id="profile" to="#profile" icon="account" label="Profile">Profile</:menu>
    <:menu id="security" to="#security" icon="shield-lock" label="Security">Security</:menu>
    <:menu id="billing" to="#billing" icon="credit-card" label="Billing">Billing</:menu>
  </.dm_left_menu_group>
</:menu>