Sidebar

New

Overview

A navigation sidebar with a fixed header and footer, scrollable groups, and active-page links.

HEEx

<Sidebar.sidebar
  id="example-sidebar"
  label="Project navigation"
  class="h-96 w-72 rounded-xl border shadow-sm"
>
  <:header>
    <div class="flex items-center gap-3 px-2 py-1">
      <span class="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground">
        <Icon.icon name="hero-squares-2x2-solid" class="size-4" />
      </span>
      <div>
        <p class="text-sm font-semibold">Acme</p>
        <p class="text-xs text-muted-foreground">Product workspace</p>
      </div>
    </div>
  </:header>
  <Sidebar.sidebar_group label="Workspace">
    <Sidebar.sidebar_item href="#" active>
      <span class="flex items-center gap-2">
        <Icon.icon name="hero-home" class="size-4" /> Overview
      </span>
    </Sidebar.sidebar_item>
    <Sidebar.sidebar_item href="#">
      <span class="flex items-center gap-2">
        <Icon.icon name="hero-folder" class="size-4" /> Projects
      </span>
    </Sidebar.sidebar_item>
    <Sidebar.sidebar_item href="#">
      <span class="flex items-center gap-2">
        <Icon.icon name="hero-users" class="size-4" /> Team
      </span>
      <:trailing>
        <Badge.badge kind={:neutral}>6</Badge.badge>
      </:trailing>
    </Sidebar.sidebar_item>
  </Sidebar.sidebar_group>
  <Sidebar.sidebar_group label="Account">
    <Sidebar.sidebar_item href="#">
      <span class="flex items-center gap-2">
        <Icon.icon name="hero-cog-6-tooth" class="size-4" /> Settings
      </span>
    </Sidebar.sidebar_item>
  </Sidebar.sidebar_group>
  <:footer>
    <p class="px-2 text-xs text-muted-foreground">Signed in as alex@example.com</p>
  </:footer>
</Sidebar.sidebar>

Navigation group

Group related destinations under a short label with an optional action slot.

Projects

HEEx

<div class="w-full max-w-72 rounded-xl border bg-background p-3">
  <Sidebar.sidebar_group label="Projects">
    <:action>
      <Button.button kind={:ghost} size={:icon_xs} aria-label="Add project">
        <Icon.icon name="hero-plus" class="size-4" />
      </Button.button>
    </:action>
    <Sidebar.sidebar_item href="#" active>Design system</Sidebar.sidebar_item>
    <Sidebar.sidebar_item href="#">Marketing site</Sidebar.sidebar_item>
    <Sidebar.sidebar_item href="#">Customer portal</Sidebar.sidebar_item>
  </Sidebar.sidebar_group>
</div>

Navigation item

Use active to add the current-page state. The trailing and submenu slots remain optional.

HEEx

<ul class="grid w-full max-w-72 gap-1 rounded-xl border bg-background p-3" role="list">
  <Sidebar.sidebar_item href="#" active>
    <span class="flex items-center gap-2">
      <Icon.icon name="hero-inbox" class="size-4" /> Inbox
    </span>
    <:trailing>
      <Badge.badge kind={:neutral}>3</Badge.badge>
    </:trailing>
    <:submenu>
      <ul class="ml-5 mt-1 border-l border-border pl-3 text-sm text-muted-foreground">
        <li><Link.link href="#">Assigned to me</Link.link></li>
      </ul>
    </:submenu>
  </Sidebar.sidebar_item>
  <Sidebar.sidebar_item href="#">
    <span class="flex items-center gap-2">
      <Icon.icon name="hero-archive-box" class="size-4" /> Archive
    </span>
  </Sidebar.sidebar_item>
</ul>

Add this module

terminal

mix dizzy.add sidebar

Component API

Sidebar.sidebar

Attributes

Attributes for Sidebar.sidebar
Name	Type	Default	Values
`class`	`:any`	nil	—
`id`	`:string`	Required	—
`label`	`:string`	"Sidebar"	—
`rest`	`:global`	nil	—
`side`	`:atom`	:left	:left, :right

Slots

Slots for Sidebar.sidebar
Name	Required
`footer`	Optional
`header`	Optional
`inner_block`	Required

Sidebar.sidebar_group

Attributes

Attributes for Sidebar.sidebar_group
Name	Type	Default	Values
`class`	`:any`	nil	—
`label`	`:string`	nil	—
`rest`	`:global`	nil	—

Slots

Slots for Sidebar.sidebar_group
Name	Required
`action`	Optional
`inner_block`	Required

Sidebar.sidebar_item

Attributes

Attributes for Sidebar.sidebar_item
Name	Type	Default	Values
`active`	`:boolean`	false	—
`class`	`:any`	nil	—
`href`	`:any`	nil	—
`method`	`:string`	"get"	"get", "head", "post", "put", "patch", "delete", "options", "connect", "trace"
`navigate`	`:string`	nil	—
`patch`	`:string`	nil	—
`replace`	`:boolean`	false	—
`rest`	`:global`	nil	—

Slots

Slots for Sidebar.sidebar_item
Name	Required
`inner_block`	Required
`submenu`	Optional
`trailing`	Optional