Dropdown

Contextual menus that appear on trigger interaction. Use for actions, navigation options, or selection lists.

Basic Dropdown

Menu Dropdown

Click to reveal a list of actions.

<div class="dropdown">
  <button class="btn dropdown-trigger">
    Options
    <svg>...chevron...</svg>
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item">Edit</button>
    <button class="dropdown-item">Duplicate</button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item dropdown-item-danger">Delete</button>
  </div>
</div>

Dropdown Positions

Alignment Options

Position the menu relative to the trigger.

<!-- Default: bottom-left -->
<div class="dropdown">...</div>

<!-- Bottom-right -->
<div class="dropdown dropdown-right">...</div>

<!-- Top alignment -->
<div class="dropdown dropdown-top">...</div>

User Menu

Profile Dropdown

Common pattern for user account menus.

Seth Ford
seth@ferni.ai
<div class="dropdown-menu dropdown-menu-wide">
  <div class="dropdown-header">
    <div class="dropdown-header-name">Seth Ford</div>
    <div class="dropdown-header-email">seth@ferni.ai</div>
  </div>
  <div class="dropdown-divider"></div>
  <button class="dropdown-item">Profile</button>
  ...
</div>

Selection Dropdown

With Checkmarks

For selecting options with visual confirmation.

<button class="dropdown-item dropdown-item-selected">
  <svg class="check-icon">...</svg>
  Recent
</button>

CSS Implementation

/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Trigger */
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--duration-fast) var(--ease-ease-out);
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Right alignment */
.dropdown-right .dropdown-menu {
  left: auto;
  right: 0;
}

/* Items */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ease-out);
  text-align: left;
}

.dropdown-item:hover {
  background: var(--bg-secondary);
}

.dropdown-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Danger variant */
.dropdown-item-danger {
  color: var(--error);
}

.dropdown-item-danger svg {
  color: var(--error);
}

.dropdown-item-danger:hover {
  background: rgba(var(--error-rgb), 0.1);
}

/* Divider */
.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
}

/* Header */
.dropdown-header {
  padding: var(--space-3) var(--space-3);
}

.dropdown-header-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.dropdown-header-email {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Selection checkmark */
.dropdown-item .check-icon {
  opacity: 0;
}

.dropdown-item-selected .check-icon {
  opacity: 1;
  color: var(--accent-primary);
}

/* Wide variant */
.dropdown-menu-wide {
  min-width: 220px;
}

Accessibility

Keyboard Support

Enter/Space opens menu. Arrow keys navigate. Escape closes. Tab moves focus out.

ARIA Attributes

Use aria-haspopup="menu" on trigger, role="menu" on container, role="menuitem" on items.

Focus Management

Focus moves to first item when opened. Returns to trigger on close.

Click Outside

Clicking outside the dropdown closes it. Essential for touch devices.