Advanced.sidebar_profile_menu

`Advanced.sidebar_profile_menu`

Server-rendered

Profile/account menu pattern for sidebar footers.

This composes the sidebar footer trigger with an avatar, identity copy, and a dropdown menu for account actions. It is intended for the common “current user in the sidebar footer” pattern.

Sidebar profile menu

Inset

  <.sidebar_layout id="sidebar-profile-menu-shell" full_screen={false}>
  <:header>
    <.sidebar_header>
      <span data-sidebar-label class="text-sm font-semibold">Workspace tools</span>
    </.sidebar_header>
  </:header>
  <:sidebar>
    <.sidebar_group label="Navigation">
      <.sidebar_item icon="settings">Settings</.sidebar_item>
      <.sidebar_item icon="circle-help">Get help</.sidebar_item>
      <.sidebar_item icon="search">Search</.sidebar_item>
    </.sidebar_group>
    <.sidebar_group label="Shortcuts">
      <.sidebar_item icon="command">Command palette</.sidebar_item>
      <.sidebar_item icon="bell">Notifications</.sidebar_item>
    </.sidebar_group>
  </:sidebar>
  <:footer>
    <.sidebar_footer>
      <.sidebar_profile_menu
        id="sidebar-profile-menu-example"
        name="shadcn"
        subtitle="m@example.com"
        avatar_src="example.png"
        avatar_alt="shadcn"
      >
        <:item icon="badge-check">Account</:item>
        <:item icon="credit-card">Billing</:item>
        <:item icon="bell">Notifications</:item>
        <:item icon="log-out" separator_before={true}>Log out</:item>
      </.sidebar_profile_menu>
    </.sidebar_footer>
  </:footer>
  <:main><div class="rounded border bg-card p-4 text-sm">Inset</div></:main>
</.sidebar_layout>

Collapsed profile menu

Inset

  <.sidebar_layout id="sidebar-profile-menu-collapsed" default_open={false} full_screen={false}>
  <:sidebar>
    <.sidebar_group label="Quick actions">
      <.sidebar_item icon="home" current={true}>Home</.sidebar_item>
      <.sidebar_item icon="inbox">Inbox</.sidebar_item>
    </.sidebar_group>
  </:sidebar>
  <:footer>
    <.sidebar_footer>
      <.sidebar_profile_menu
        id="sidebar-profile-menu-collapsed-example"
        name="Mira Chen"
        subtitle="mira@example.com"
        avatar_src="example.png"
        avatar_alt="Mira Chen"
      >
        <:item icon="user">Profile</:item>
        <:item icon="settings">Settings</:item>
      </.sidebar_profile_menu>
    </.sidebar_footer>
  </:footer>
  <:main><div class="rounded border bg-card p-4 text-sm">Inset</div></:main>
</.sidebar_layout>

Attributes

Name	Type	Default	Values	Global Includes
`avatar_alt`	`:string`	—	—	—
`avatar_fallback`	`:string`	—	—	—
`avatar_src`	`:string`	—	—	—
`class`	`:string`	—	—	—
`content_class`	`:string`	—	—	—
`id` Required	`:string`	—	—	—
`name` Required	`:string`	—	—	—
`rest`	`:global`	—	—	—
`subtitle`	`:string`	—	—	—
`trigger_class`	`:string`	—	—	—

Slots

Slot	Slot Attributes
`item` Required	`href` (:string) `navigate` (:string) `patch` (:string) `method` (:string) `replace` (:boolean) `csrf_token` (:string) `disabled` (:boolean) `icon` (:string) `separator_before` (:boolean)