Phoenix + DaisyUI

Sidebar

This is a Simple sidebar

It uses tooltip links when collapsed

When extended, the sidebar is a menu item with links

On mobile, click on the button below to see the sidebar

Attribute Type Documentation Default Value
id :string "sidebar"
always_open :boolean

Whether the sidebar is always open, even on smaller screens, defaults to false, hidding the sidebar on smaller screens.
false
class :any
rest :global
Required page_content * :slot 
<:page_content>
  <div class="p-4">
    <h1 class="text-2xl font-bold">This is a Simple sidebar</h1>
    <p>It uses tooltip links when collapsed</p>
    <p>When extended, the sidebar is a menu item with links</p>
    <p>On mobile, click on the button below to see the sidebar</p>
    <label for="sidebar-single-simple-sidebar" class="btn btn-primary mt-4">
      Open Sidebar
    </label>

  </div>
</:page_content>
inner_block :slot 
<.sidebar_items>
  <.sidebar_menu_title>Menu</.sidebar_menu_title>
  <.sidebar_item href="#" icon="hero-home" text="Home" active={true} />
  <.sidebar_item href="#" icon="hero-information-circle" text="About" />
  <.sidebar_divider />
  <.sidebar_menu_title>Settings</.sidebar_menu_title>
  <.sidebar_item href="#" icon="hero-user" text="Profile" />
  <.sidebar_item href="#" icon="hero-logout" text="Logout" />
</.sidebar_items>