Advanced.sidebar_trigger

`Advanced.sidebar_trigger`

Server-rendered

Button that toggles the surrounding sidebar_layout/1 between expanded and collapsed.

By default this renders the compact shadcn-style icon button. You can also supply your own trigger content or change the rendered tag with as.

Sidebar trigger

  <.sidebar_layout id="sidebar-trigger-example" full_screen={false}>
  <:header>
    <.sidebar_header>
      <span data-sidebar-label class="text-sm font-semibold">Navigation</span>
      <.sidebar_trigger />
    </.sidebar_header>
  </:header>
  <:sidebar>
    <.sidebar_group label="Navigation">
      <.sidebar_item icon="home" current={true}>Overview</.sidebar_item>
      <.sidebar_item icon="box">Releases</.sidebar_item>
    </.sidebar_group>
  </:sidebar>
  <:main><div class="rounded border bg-card p-4 text-sm">Inset</div></:main>
</.sidebar_layout>

Custom trigger content

  <.sidebar_layout id="sidebar-trigger-custom-example" full_screen={false}>
  <:header>
    <.sidebar_header>
      <span data-sidebar-label class="text-sm font-semibold">Workspace</span>
      <.sidebar_trigger as="div" class="gap-2 px-2 text-xs">
        <.icon name="panel-left" class="size-4" />
        <span data-sidebar-label>Collapse</span>
      </.sidebar_trigger>
    </.sidebar_header>
  </:header>
  <:sidebar>
    <.sidebar_group label="Workspace">
      <.sidebar_item icon="folder">Projects</.sidebar_item>
      <.sidebar_item icon="users">Team</.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
`as`	`:string`	`"button"`	—	—
`class`	`:string`	—	—	—
`rest`	`:global`	—	—	—

Slots

Slot	Slot Attributes
`inner_block`	—