D
Design System
Design System/Molecules/Account Menu

Account Menu

Structured account dropdown with profile header, sections, action rows, and separators.

When To Use

  • Use Account Menu when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Props

name, email, avatarSrc, avatarAlt, fallback, icon

Key exports

AccountMenuContent, AccountMenuHeader, AccountMenuSection, AccountMenuItem, AccountMenuSeparator

Example Code

import {
  AccountMenuContent, AccountMenuHeader, AccountMenuItem,
  AccountMenuSection, AccountMenuSeparator, DropdownMenu, DropdownMenuTrigger,
} from "@hilum/ui"
import { Button } from "@hilum/ui"
import { Settings, LogOut } from "lucide-react"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open account menu</Button>
  </DropdownMenuTrigger>
  <AccountMenuContent align="end">
    <AccountMenuHeader name="Sofia Perez" email="sofia@hilum.dev" fallback="SP" />
    <AccountMenuSeparator />
    <AccountMenuSection>
      <AccountMenuItem icon={<Settings aria-hidden="true" />}>Settings</AccountMenuItem>
      <AccountMenuItem icon={<LogOut aria-hidden="true" />} destructive>
        Sign out
// ...trimmed for docs

Dropdown

Account dropdown

Use with DropdownMenu so focus, keyboard support, and dismissal stay consistent.

Content Model

Header and sections

Account rows support icons, descriptions, trailing metadata, and destructive actions.