View Source Lume.Components.Sidebar (lume v0.2.1)
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
Renders the branding section of the sidebar.
Attributes
title
- Optional title text to display at the toplogo
- Optional path to logo image
Slots
inner_block
- The content to be displayed below the title
Attributes
title
(:string
) - Defaults tonil
.logo
(:string
) - Defaults tonil
.
Slots
inner_block
Renders the main sidebar component.
Attributes
id
- Optional unique identifier for the sidebar, defaults to "sidebar"
Slots
inner_block
- The content to be displayed in the sidebar
Attributes
id
(:string
) - Defaults to"sidebar"
.
Slots
inner_block
(required)