Actions

Dropdown Menu

A menu of actions and links that opens from a button.

Class name	Type	Description
`dropdownplf:dropdown`	Component	Wraps the trigger and the menu
`menuplf:menu`	Component	The list of items, with dropdown-content
`dropdown-contentplf:dropdown-content`	Part	The floating panel
`menu-itemplf:menu-item`	Part	A button or link item
`menu-titleplf:menu-title`	Part	A label above items
`menu-separatorplf:menu-separator`	Part	A divider between items
`menu-iconplf:menu-icon`	Part	An SVG icon before the text; an icon class there doesn't need it
`menu-textplf:menu-text`	Part	An item's text
`menu-shortcutplf:menu-shortcut`	Part	A key hint; binds no key
`menu-chevronplf:menu-chevron`	Part	The trigger's chevron; turns while open
`menu-item-errorplf:menu-item-error`	Color	A destructive item

Default

Items hold text and an icon only; other controls in the menu stop it from working.

<div class="dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="btn btn-outline">
    <span>Account actions</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <div class="menu-title">My workspace</div>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Preferences</span>
    </button>
    <button class="menu-item" disabled>
      <span class="icon icon-credit-card"></span>
      <span class="menu-text">Billing</span>
    </button>
    <a class="menu-item" href="#" aria-disabled="true">
      <span class="icon icon-download"></span>
      <span class="menu-text">Export</span>
    </a>
    <hr class="menu-separator">
    <a class="menu-item" href="#">
      <span class="icon icon-book"></span>
      <span class="menu-text">Usage guide</span>
    </a>
    <hr class="menu-separator">
    <button class="menu-item menu-item-error">
      <span class="icon icon-logout"></span>
      <span class="menu-text">Sign out</span>
    </button>
  </div>
</div>

<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="plf:btn plf:btn-outline">
    <span>Account actions</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <div class="plf:menu-title">My workspace</div>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Preferences</span>
    </button>
    <button class="plf:menu-item" disabled>
      <span class="plf:icon plf:icon-credit-card"></span>
      <span class="plf:menu-text">Billing</span>
    </button>
    <a class="plf:menu-item" href="#" aria-disabled="true">
      <span class="plf:icon plf:icon-download"></span>
      <span class="plf:menu-text">Export</span>
    </a>
    <hr class="plf:menu-separator">
    <a class="plf:menu-item" href="#">
      <span class="plf:icon plf:icon-book"></span>
      <span class="plf:menu-text">Usage guide</span>
    </a>
    <hr class="plf:menu-separator">
    <button class="plf:menu-item plf:menu-item-error">
      <span class="plf:icon plf:icon-logout"></span>
      <span class="plf:menu-text">Sign out</span>
    </button>
  </div>
</div>

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText, DropdownMenuTitle, DropdownMenuTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <DropdownMenu align="start">
      <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
        <span>Account actions</span>
        <Icon name="chevron-down" className="menu-chevron" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuTitle>My workspace</DropdownMenuTitle>
        <DropdownMenuItem>
          <Icon name="user" />
          <DropdownMenuText>Profile</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="settings" />
          <DropdownMenuText>Preferences</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <Icon name="credit-card" />
          <DropdownMenuText>Billing</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem href="#" aria-disabled="true">
          <Icon name="download" />
          <DropdownMenuText>Export</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem href="#">
          <Icon name="book" />
          <DropdownMenuText>Usage guide</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem color="error">
          <Icon name="logout" />
          <DropdownMenuText>Sign out</DropdownMenuText>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText, DropdownMenuTitle, DropdownMenuTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <DropdownMenu align="start">
      <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
        <span>Account actions</span>
        <Icon name="chevron-down" className="plf:menu-chevron" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuTitle>My workspace</DropdownMenuTitle>
        <DropdownMenuItem>
          <Icon name="user" />
          <DropdownMenuText>Profile</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="settings" />
          <DropdownMenuText>Preferences</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <Icon name="credit-card" />
          <DropdownMenuText>Billing</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem href="#" aria-disabled="true">
          <Icon name="download" />
          <DropdownMenuText>Export</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem href="#">
          <Icon name="book" />
          <DropdownMenuText>Usage guide</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem color="error">
          <Icon name="logout" />
          <DropdownMenuText>Sign out</DropdownMenuText>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Items

<div class="dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="btn btn-outline">
    <span>My account</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <div class="menu-title">My account</div>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-credit-card"></span>
      <span class="menu-text">Billing</span>
    </button>
    <a class="menu-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </a>
    <hr class="menu-separator">
    <button class="menu-item menu-item-error">
      <span class="icon icon-logout"></span>
      <span class="menu-text">Log out</span>
    </button>
  </div>
</div>

<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="plf:btn plf:btn-outline">
    <span>My account</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <div class="plf:menu-title">My account</div>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-credit-card"></span>
      <span class="plf:menu-text">Billing</span>
    </button>
    <a class="plf:menu-item" href="#">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </a>
    <hr class="plf:menu-separator">
    <button class="plf:menu-item plf:menu-item-error">
      <span class="plf:icon plf:icon-logout"></span>
      <span class="plf:menu-text">Log out</span>
    </button>
  </div>
</div>

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText, DropdownMenuTitle, DropdownMenuTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <DropdownMenu align="start">
      <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
        <span>My account</span>
        <Icon name="chevron-down" className="menu-chevron" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuTitle>My account</DropdownMenuTitle>
        <DropdownMenuItem>
          <Icon name="user" />
          <DropdownMenuText>Profile</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="credit-card" />
          <DropdownMenuText>Billing</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem href="#">
          <Icon name="settings" />
          <DropdownMenuText>Settings</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem color="error">
          <Icon name="logout" />
          <DropdownMenuText>Log out</DropdownMenuText>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText, DropdownMenuTitle, DropdownMenuTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <DropdownMenu align="start">
      <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
        <span>My account</span>
        <Icon name="chevron-down" className="plf:menu-chevron" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuTitle>My account</DropdownMenuTitle>
        <DropdownMenuItem>
          <Icon name="user" />
          <DropdownMenuText>Profile</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="credit-card" />
          <DropdownMenuText>Billing</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuItem href="#">
          <Icon name="settings" />
          <DropdownMenuText>Settings</DropdownMenuText>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem color="error">
          <Icon name="logout" />
          <DropdownMenuText>Log out</DropdownMenuText>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Disabled

A link item takes aria-disabled="true" instead of disabled.

<div class="dropdown" data-plf-dropdown-menu>
  <button class="btn btn-outline">
    <span>Disabled items</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item" disabled>
      <span class="icon icon-credit-card"></span>
      <span class="menu-text">Billing</span>
    </button>
    <a class="menu-item" href="#" aria-disabled="true">
      <span class="icon icon-download"></span>
      <span class="menu-text">Export</span>
    </a>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu>
  <button class="btn btn-outline" disabled>
    <span>Unavailable actions</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">Profile</button>
  </div>
</div>

<div class="plf:dropdown" data-plf-dropdown-menu>
  <button class="plf:btn plf:btn-outline">
    <span>Disabled items</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item" disabled>
      <span class="plf:icon plf:icon-credit-card"></span>
      <span class="plf:menu-text">Billing</span>
    </button>
    <a class="plf:menu-item" href="#" aria-disabled="true">
      <span class="plf:icon plf:icon-download"></span>
      <span class="plf:menu-text">Export</span>
    </a>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu>
  <button class="plf:btn plf:btn-outline" disabled>
    <span>Unavailable actions</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">Profile</button>
  </div>
</div>

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Disabled items</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>
            <Icon name="credit-card" />
            <DropdownMenuText>Billing</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem href="#" aria-disabled="true">
            <Icon name="download" />
            <DropdownMenuText>Export</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })} disabled>
          <span>Unavailable actions</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Profile</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Disabled items</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>
            <Icon name="credit-card" />
            <DropdownMenuText>Billing</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem href="#" aria-disabled="true">
            <Icon name="download" />
            <DropdownMenuText>Export</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })} disabled>
          <span>Unavailable actions</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Profile</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

Placement

The menu flips to the opposite side when the chosen one has no room; a left or right menu that fits on neither side opens below or above.

<div class="dropdown" data-plf-dropdown-menu data-plf-placement="top">
  <button class="btn btn-outline">
    <span>Top</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu data-plf-placement="right">
  <button class="btn btn-outline">
    <span>Right</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu>
  <button class="btn btn-outline">
    <span>Bottom</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu data-plf-placement="left">
  <button class="btn btn-outline">
    <span>Left</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>

<div class="plf:dropdown" data-plf-dropdown-menu data-plf-placement="top">
  <button class="plf:btn plf:btn-outline">
    <span>Top</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu data-plf-placement="right">
  <button class="plf:btn plf:btn-outline">
    <span>Right</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu>
  <button class="plf:btn plf:btn-outline">
    <span>Bottom</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu data-plf-placement="left">
  <button class="plf:btn plf:btn-outline">
    <span>Left</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <DropdownMenu placement="top">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Top</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu placement="right">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Right</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Bottom</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu placement="left">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Left</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <DropdownMenu placement="top">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Top</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu placement="right">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Right</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Bottom</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu placement="left">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Left</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

Alignment

<div class="dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="btn btn-outline">
    <span>Start</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu>
  <button class="btn btn-outline">
    <span>Center</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="dropdown" data-plf-dropdown-menu data-plf-align="end">
  <button class="btn btn-outline">
    <span>End</span>
    <span class="icon icon-chevron-down menu-chevron"></span>
  </button>
  <div class="dropdown-content menu" hidden>
    <button class="menu-item">
      <span class="icon icon-user"></span>
      <span class="menu-text">Profile</span>
    </button>
    <button class="menu-item">
      <span class="icon icon-settings"></span>
      <span class="menu-text">Settings</span>
    </button>
  </div>
</div>

<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="start">
  <button class="plf:btn plf:btn-outline">
    <span>Start</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu>
  <button class="plf:btn plf:btn-outline">
    <span>Center</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="end">
  <button class="plf:btn plf:btn-outline">
    <span>End</span>
    <span class="plf:icon plf:icon-chevron-down plf:menu-chevron"></span>
  </button>
  <div class="plf:dropdown-content plf:menu" hidden>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-user"></span>
      <span class="plf:menu-text">Profile</span>
    </button>
    <button class="plf:menu-item">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:menu-text">Settings</span>
    </button>
  </div>
</div>

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <DropdownMenu align="start">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Start</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Center</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu align="end">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>End</span>
          <Icon name="chevron-down" className="menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

import { buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuText, DropdownMenuTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <DropdownMenu align="start">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Start</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>Center</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu align="end">
        <DropdownMenuTrigger className={buttonClass({ variant: 'outline' })}>
          <span>End</span>
          <Icon name="chevron-down" className="plf:menu-chevron" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Icon name="user" />
            <DropdownMenuText>Profile</DropdownMenuText>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Icon name="settings" />
            <DropdownMenuText>Settings</DropdownMenuText>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

Dropdown Menu needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/dropdown-menu.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/dropdown-menu.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-dropdown-menu`	Marks the container
`data-plf-dropdown-menu-trigger`	Optional: marks the `<button>` that opens the menu, needed only when another element sits beside the menu, as in a Button Group
`data-plf-dropdown-menu-content`	Optional: marks the menu, otherwise the container’s one direct child with `hidden`. The trigger names the menu unless it has `aria-label` or `aria-labelledby`
`data-plf-dropdown-menu-separator`	Optional: gives another element the separator role; an `<hr class="menu-separator">` needs none
`data-plf-placement`	`top`, `right`, `bottom` (default) or `left`
`data-plf-align`	`start`, `center` (default) or `end`
`disabled`, `aria-disabled="true"`	An item or trigger that cannot be used

Methods

Method	Behavior
`PLF.DropdownMenu.getOrCreateInstance(element)`	Returns the instance, creating it for valid markup
`PLF.DropdownMenu.getInstance(element)`	Returns the instance or `null`
`instance.open()`	Opens at the first enabled item; returns `false` when canceled, open or disabled
`instance.close(reason)`	Closes and focuses the trigger; `reason` is `api` (default), `trigger` or `keyboard`. Returns `false` when canceled or closed
`instance.toggle()`	Opens or closes
`instance.trigger`, `instance.panel`	The trigger button and the menu
`instance.destroy()`	Closes without events and removes listeners and added attributes

Events

Event	When
`plf:dropdown-menu:before-open`	Before opening; cancelable
`plf:dropdown-menu:open`	After opening
`plf:dropdown-menu:before-close`	Before closing; cancelable
`plf:dropdown-menu:close`	After closing

Each event’s detail:

Property	Value
`instance`	The Dropdown Menu instance
`reason`	`api`, `trigger` or `keyboard`
`trigger`	The trigger, the chosen item, or `null`

Keyboard

Key	Action
Enter, Space, Down Arrow	On the trigger, open the menu at the first item
Up Arrow	On the trigger, opens the menu at the last item
Down Arrow, Up Arrow	Move to the next or previous item
Home, End	Move to the first or last item
A character	Moves to the next item starting with it
Enter, Space	Choose the focused item
Escape	Closes the menu and focuses the trigger
Tab, Shift+Tab	Close the menu and move on

React

DropdownMenu from @pelatform/react renders this menu: it keeps its own state, or the application sets it with open, and each part is a component of its own.

Prop	Values	Default
`placement`	`top`, `right`, `bottom` or `left`	`bottom`
`align`	`start`, `center` or `end`	`center`
`open`	`true` while the menu is open, which the application changes in `onOpenChange`	Its own state
`defaultOpen`	`true` starts open when the application does not set `open`	`false`
`onOpenChange`	`(open, reason)`, called when the menu opens or closes: `trigger` (the trigger, a press outside or a chosen item) or `keyboard`; keep `open` to stay as it is	None

The parts:

Part	Element
`DropdownMenuTrigger`	A `button` that opens the menu and names it; `buttonClass()` gives it a look
`DropdownMenuContent`	A `div` with `dropdown-content menu`, the menu
`DropdownMenuItem`	A `button` with `menu-item`, or a link with `href`; `color="error"` marks a destructive item, and `onSelect(event)` runs when it is chosen, then the menu closes unless it calls `event.preventDefault()`
`DropdownMenuTitle`	A `div` with `menu-title`
`DropdownMenuSeparator`	An `hr` with `menu-separator`
`DropdownMenuText`	A `span` with `menu-text`
`DropdownMenuShortcut`	A `span` with `menu-shortcut`, hidden from assistive technologies

The other props are the element’s own, className and ref included.

CSS variables

Variable	Default
`--plf-dropdown-menu-width`	`14rem`, capped at the viewport
`--plf-dropdown-menu-bg`, `--plf-dropdown-menu-color`	Elevated surface and text
`--plf-dropdown-menu-border`	Subtle border; also colors separators
`--plf-dropdown-menu-radius`	Large radius (8px)
`--plf-dropdown-menu-item-hover-bg`	Muted surface; danger subtle on destructive items