- 1.5.0

Left Menu

Basic left menu with active item
Open in playground 
<.dm_left_menu active="dashboard" id="left-menu-single-default" class="w-56">
  <:title>Navigation</:title>
  <:menu>
    <.dm_left_menu_group active="dashboard">
      <:title>Pages</:title>
      <:menu id="dashboard" to="#dashboard">Dashboard</:menu>
      <:menu id="components" to="#components">Components</:menu>
      <:menu id="settings" to="#settings">Settings</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>
Pass the active item to each group
Open in playground 
<.dm_left_menu active="components" id="left-menu-single-with-active-state" class="w-56">
  <:title>Menu with Active State</:title>
  <:menu>
    <.dm_left_menu_group active="components">
      <:title>Pages</:title>
      <:menu id="dashboard" to="#dashboard">Dashboard</:menu>
      <:menu id="components" to="#components">Components</:menu>
      <:menu id="settings" to="#settings">Settings</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>
Menu with enabled and disabled items
Open in playground 
<.dm_left_menu id="left-menu-single-with-disabled-items" class="w-56">
  <:title>Menu with Disabled Items</:title>
  <:menu>
    <.dm_left_menu_group id="storybook-unavailable-items">
      <:title>Items</:title>
      <:menu id="enabled" to="#enabled">Enabled Item</:menu>
      <:menu id="services" disabled icon="cog" label="Services">
        Services <span>Requires scope</span>
      </:menu>
      <:menu id="disabled" to="#disabled" disabled>Disabled destination</:menu>
      <:menu id="another" to="#another">Another Enabled Item</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>
Disabled data entries can omit a destination.
Open in playground 
<.dm_left_menu
  id="left-menu-single-disabled-data-items"
  groups={[%{id: "workers", label: "Workers", items: [%{id: "overview", label: "Overview", to: "#overview", icon: "view-dashboard"}, %{disabled: true, id: "services", label: "Services", icon: "cog"}]}]}
 />
Use the bottom button to collapse to an icon rail. Group state returns when expanded; hover or focus icons for labels.
Open in playground 
<.dm_left_menu id="left-menu-single-collapsible" class="h-80 bg-base-200" collapsible>
  <:header><strong data-left-menu-label>Workspace</strong></:header>
  <: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>
  <:footer><span data-left-menu-label>Account settings</span></:footer>
</.dm_left_menu>
Size variants
Open in playground 
<.dm_left_menu id="left-menu-sizes-xs" size="xs" class="w-48">
  <:title>XS Menu</:title>
  <:menu>
    <.dm_left_menu_group active="">
      <:title>Pages</:title>
      <:menu id="dashboard" to="#dashboard">Dashboard</:menu>
      <:menu id="components" to="#components">Components</:menu>
      <:menu id="settings" to="#settings">Settings</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>
<.dm_left_menu id="left-menu-sizes-sm" size="sm" class="w-52">
  <:title>Small Menu</:title>
  <:menu>
    <.dm_left_menu_group active="">
      <:title>Pages</:title>
      <:menu id="dashboard" to="#dashboard">Dashboard</:menu>
      <:menu id="components" to="#components">Components</:menu>
      <:menu id="settings" to="#settings">Settings</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>
<.dm_left_menu id="left-menu-sizes-lg" size="lg" class="w-64">
  <:title>Large Menu</:title>
  <:menu>
    <.dm_left_menu_group active="">
      <:title>Pages</:title>
      <:menu id="dashboard" to="#dashboard">Dashboard</:menu>
      <:menu id="components" to="#components">Components</:menu>
      <:menu id="settings" to="#settings">Settings</:menu>
    </.dm_left_menu_group>
  </:menu>
</.dm_left_menu>