Docs

Cinder UI

Advanced.sidebar_header

Server-rendered

Sidebar header container.

Use this inside the :header slot of sidebar_layout/1 for branding, workspace selectors, or the collapse trigger.

Sidebar header

  <.sidebar_layout id="sidebar-header-example" full_screen={false}>
  <:header>
    <.sidebar_header>
      <div data-sidebar-label class="min-w-0 flex-1">
        <p class="truncate text-sm font-semibold">Workspace</p>
        <p class="text-sidebar-foreground/70 truncate text-xs">Active release branch</p>
      </div>
      <.badge variant={:outline}>3 open</.badge>
    </.sidebar_header>
  </:header>
  <:sidebar>
    <.sidebar_group label="Navigation">
      <.sidebar_item icon="home" current={true}>Overview</.sidebar_item>
    </.sidebar_group>
  </:sidebar>
  <:main><div class="rounded border bg-card p-4 text-sm">Inset</div></:main>
</.sidebar_layout>

Attributes

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

Slots

Slot Slot Attributes
inner_block Required