Advanced.sidebar_group
Server-rendered
Sidebar group wrapper.
Groups are useful for labeled sections such as navigation, tools, or account controls. Pass label for the section heading and render sidebar_item/1 children directly inside the group.
Sidebar group
<.sidebar_layout id="sidebar-group-example" full_screen={false}>
<:header>
<.sidebar_header>
<span data-sidebar-label class="text-sm font-semibold">Product nav</span>
</.sidebar_header>
</:header>
<:sidebar>
<.sidebar_group label="Workspace">
<.sidebar_item icon="folder-kanban" current={true} collapsible={true} default_open={true}>
Projects
<:children>
<.sidebar_item>Roadmap</.sidebar_item>
<.sidebar_item>Releases</.sidebar_item>
</:children>
</.sidebar_item>
<.sidebar_item icon="ship-wheel" badge="2">Deployments</.sidebar_item>
<.sidebar_item icon="message-square">Feedback</.sidebar_item>
</.sidebar_group>
<.sidebar_group label="Insights">
<.sidebar_item icon="chart-column">Analytics</.sidebar_item>
<.sidebar_item icon="bell-ring" badge="4">Alerts</.sidebar_item>
</.sidebar_group>
</:sidebar>
<:main>
<div class="rounded border bg-card p-4 text-sm">
A sidebar can stack multiple labeled groups while keeping each section
visually separate.
</div>
</:main>
</.sidebar_layout>
Attributes
| Name | Type | Default | Values | Global Includes |
|---|---|---|---|---|
class
|
:string |
— | — | — |
label
|
:string |
— | — | — |
label_class
|
:string |
— | — | — |
rest
|
:global |
— | — | — |
Slots
| Slot | Slot Attributes |
|---|---|
action
|
— |
inner_block
Required
|
— |