Dropdowns

Enterprise-grade dropdown menus and panels for Aggarly Platform. Token-driven, theme-safe, RTL-safe, keyboard-friendly, portal-positioned (no clipping), and predictable auto-close behavior.

Single Button Dropdown

Default action menu pattern: clean items, separator, and a destructive action.

Show code

import { Button } from "@/design-system/components/Button";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator } from "@/design-system/components/Dropdown";

export function Example() {
  return (
    <Dropdown align="end" tone="primary">
      <DropdownTrigger asChild>
        <Button variant="primary" trailingIcon={<IconChevronDown />}>Actions</Button>
      </DropdownTrigger>

      <DropdownMenu>
        <DropdownItem leadingIcon={<IconPencil />}>Edit</DropdownItem>
        <DropdownItem leadingIcon={<IconCopy />}>Duplicate</DropdownItem>
        <DropdownItem leadingIcon={<IconArchive />}>Archive</DropdownItem>

        <DropdownSeparator />

        <DropdownItem tone="danger" leadingIcon={<IconTrash />}>Delete</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Surface Variants

Premium variants (surface / glass / neumorphic) aligned with your Popover surfaces.

Show code

import { Button } from "@/design-system/components/Button";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@/design-system/components/Dropdown";

export function Example() {
  return (
    <div className="dropdowns-grid">
      <Dropdown variant="surface" tone="neutral">
        <DropdownTrigger asChild>
          <Button variant="ghost" trailingIcon={<IconChevronDown />}>Surface</Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem>Profile</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Dropdown variant="glass" tone="primary">
        <DropdownTrigger asChild>
          <Button variant="ghost" trailingIcon={<IconChevronDown />}>Glass</Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem>Open</DropdownItem>
          <DropdownItem>Export</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Dropdown variant="neumorphic" tone="secondary">
        <DropdownTrigger asChild>
          <Button variant="ghost" trailingIcon={<IconChevronDown />}>Neumorphic</Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem>Assign</DropdownItem>
          <DropdownItem>Archive</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

Dropdown Color Variant

Tone drives focus ring and selection accents. Pair with Button variants for hierarchy.

Show code

// See page source (same structure as above)

Split Button Dropdown

Enterprise split action: primary CTA + caret that opens a menu.

Show code

import { Button } from "@/design-system/components/Button";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@/design-system/components/Dropdown";

export function Example() {
  return (
    <Dropdown align="end" tone="primary">
      <div className="dropdown-split">
        <Button variant="primary" className="dropdown-split__primary">Create</Button>

        <DropdownTrigger asChild>
          <Button variant="primary" iconOnly aria-label="More create actions" className="dropdown-split__toggle">
            <IconChevronDown />
          </Button>
        </DropdownTrigger>
      </div>

      <DropdownMenu>
        <DropdownItem>Create plan</DropdownItem>
        <DropdownItem>Create goal</DropdownItem>
        <DropdownItem>Create session</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Dropdown Sizing

Size affects item height/padding for density control. Match Button size to Dropdown size.

Show code

// See page source (Dropdown size + Button size matched)

Alignment Options

start/center/end align relative to the trigger (stable in grids, portal-safe).

Show code

// See page source (align=start|center|end)

Auto Close Behavior

Control closing on item selection and outside click. For panels/forms, use autoClose='none' + explicit close.

Show code

// See page source (autoClose=all|outside|none)

Menu Content

Labels, separators, descriptions, shortcuts, and selection indicators.

Show code

// See page source (DropdownLabel, DropdownSeparator, descriptions, shortcuts, indicators)

Notifications

Premium notification panel: icon trigger + badge, structured list, footer actions.

Show code

// See page source (panel menu + badge + list + footer)

Dropdown with notifications tabs

Enterprise notification center with multiple tabs (All, Mentions, System).

Show code

import { Button } from "@/design-system/components/Button";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownTabs } from "@/design-system/components/Dropdown";

export function Example() {
  return (
    <Dropdown align="end" autoClose="outside" tone="primary" variant="surface">
      <DropdownTrigger asChild>
        <Button variant="ghost" iconOnly aria-label="Notifications">
          <IconBell />
          <span className="dropdown-badge" aria-hidden="true">7</span>
        </Button>
      </DropdownTrigger>

      <DropdownMenu kind="panel" className="dropdown-notify" aria-label="Notifications">
        <DropdownTabs
          ariaLabel="Notifications"
          tabs={[
            { id: "all", label: "All", count: 7, content: <div>All…</div> },
            { id: "mentions", label: "Mentions", count: 2, content: <div>Mentions…</div> },
            { id: "system", label: "System", count: 1, content: <div>System…</div> }
          ]}
        />
      </DropdownMenu>
    </Dropdown>
  );
}

import { Button } from "@/design-system/components/Button"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator } from "@/design-system/components/Dropdown"; export function Example() { return ( <Dropdown align="end" tone="primary"> <DropdownTrigger asChild> <Button variant="primary" trailingIcon={<IconChevronDown />}>Actions</Button> </DropdownTrigger> <DropdownMenu> <DropdownItem leadingIcon={<IconPencil />}>Edit</DropdownItem> <DropdownItem leadingIcon={<IconCopy />}>Duplicate</DropdownItem> <DropdownItem leadingIcon={<IconArchive />}>Archive</DropdownItem> <DropdownSeparator /> <DropdownItem tone="danger" leadingIcon={<IconTrash />}>Delete</DropdownItem> </DropdownMenu> </Dropdown> ); }

import { Button } from "@/design-system/components/Button"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@/design-system/components/Dropdown"; export function Example() { return ( <div className="dropdowns-grid"> <Dropdown variant="surface" tone="neutral"> <DropdownTrigger asChild> <Button variant="ghost" trailingIcon={<IconChevronDown />}>Surface</Button> </DropdownTrigger> <DropdownMenu> <DropdownItem>Profile</DropdownItem> <DropdownItem>Settings</DropdownItem> </DropdownMenu> </Dropdown> <Dropdown variant="glass" tone="primary"> <DropdownTrigger asChild> <Button variant="ghost" trailingIcon={<IconChevronDown />}>Glass</Button> </DropdownTrigger> <DropdownMenu> <DropdownItem>Open</DropdownItem> <DropdownItem>Export</DropdownItem> </DropdownMenu> </Dropdown> <Dropdown variant="neumorphic" tone="secondary"> <DropdownTrigger asChild> <Button variant="ghost" trailingIcon={<IconChevronDown />}>Neumorphic</Button> </DropdownTrigger> <DropdownMenu> <DropdownItem>Assign</DropdownItem> <DropdownItem>Archive</DropdownItem> </DropdownMenu> </Dropdown> </div> ); }

import { Button } from "@/design-system/components/Button"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@/design-system/components/Dropdown"; export function Example() { return ( <Dropdown align="end" tone="primary"> <div className="dropdown-split"> <Button variant="primary" className="dropdown-split__primary">Create</Button> <DropdownTrigger asChild> <Button variant="primary" iconOnly aria-label="More create actions" className="dropdown-split__toggle"> <IconChevronDown /> </Button> </DropdownTrigger> </div> <DropdownMenu> <DropdownItem>Create plan</DropdownItem> <DropdownItem>Create goal</DropdownItem> <DropdownItem>Create session</DropdownItem> </DropdownMenu> </Dropdown> ); }

import { Button } from "@/design-system/components/Button"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownTabs } from "@/design-system/components/Dropdown"; export function Example() { return ( <Dropdown align="end" autoClose="outside" tone="primary" variant="surface"> <DropdownTrigger asChild> <Button variant="ghost" iconOnly aria-label="Notifications"> <IconBell /> <span className="dropdown-badge" aria-hidden="true">7</span> </Button> </DropdownTrigger> <DropdownMenu kind="panel" className="dropdown-notify" aria-label="Notifications"> <DropdownTabs ariaLabel="Notifications" tabs={[ { id: "all", label: "All", count: 7, content: <div>All…</div> }, { id: "mentions", label: "Mentions", count: 2, content: <div>Mentions…</div> }, { id: "system", label: "System", count: 1, content: <div>System…</div> } ]} /> </DropdownMenu> </Dropdown> ); }