View Source Lume.Components.Sidebar (lume v0.2.2)

A responsive sidebar component for application navigation.

Features

  • Responsive design with mobile and desktop layouts
  • Smooth mobile transitions with backdrop
  • Customizable content through slots
  • Support for logo and title
  • Dark mode support

Examples

# Basic sidebar with branding and navigation
<.sidebar>
  <.brand title="My App" logo="/images/logo.svg">
  <.nav_items
    items={[
      %{icon: "hero-home", label: "Dashboard", path: "/", nav_item: :dashboard},
      %{icon: "hero-users", label: "Users", path: "/users", nav_item: :users},
      %{separator: true},
      %{icon: "hero-cog", label: "Settings", path: "/settings", nav_item: :settings}
    ]}
    current_item={:dashboard}
  />
</.sidebar>

# Sidebar with custom content
<.sidebar id="admin-sidebar">
  <.brand title="MyApp Admin Panel">
  <.separator />
  <div class="p-4">
    <h2 class="text-lg font-semibold">Custom Content</h2>
    <p>Add any content here!</p>
  </div>
</.sidebar>

Summary

Functions

Renders the branding section of the sidebar.

Navigation items component for the sidebar.

Renders the main sidebar component.

Functions

brand(assigns)

Renders the branding section of the sidebar.

Attributes

  • title - Optional title text to display at the top
  • logo - Optional path to logo image

Slots

  • inner_block - The content to be displayed below the title

Attributes

  • title (:string) - Defaults to nil.
  • logo (:string) - Defaults to nil.

Slots

  • inner_block

sidebar(assigns)

Renders the main sidebar component.

Attributes

  • id - Optional unique identifier for the sidebar, defaults to "sidebar"
  • desktop_hidden - Optional boolean to hide the sidebar on desktop view while keeping mobile functionality, defaults to false

Slots

  • inner_block - The content to be displayed in the sidebar

Attributes

  • id (:string) - Defaults to "sidebar".
  • desktop_hidden (:boolean) - Defaults to false.

Slots

  • inner_block (required)