Docs

Cinder UI

Advanced.sidebar

Progressive

Sidebar panel region.

This is the left-hand sidebar itself. Use it inside sidebar_layout/1.

Sidebar panel

  <div class="h-64 overflow-hidden rounded-xl border">
  <.sidebar class="h-full">
    <:header>
      <.sidebar_header>
        <span data-sidebar-label class="text-sm font-semibold">Workspace</span>
      </.sidebar_header>
    </:header>

    <.sidebar_group label="Navigation">
      <.sidebar_item icon="home" current={true}>Home</.sidebar_item>
      <.sidebar_item icon="folder">Projects</.sidebar_item>
    </.sidebar_group>

    <:footer>
      <.sidebar_footer>
        <span class="text-sidebar-foreground/70 text-xs">Low-level panel helper</span>
      </.sidebar_footer>
    </:footer>
  </.sidebar>
</div>

Attributes

Name Type Default Values Global Includes
class :string
content_class :string
rest :global

Slots

Slot Slot Attributes
footer
header
inner_block