Dropdown

Dropdown

Dropdown provides a contextual menu for actions and selections that appears on trigger activation with smooth animation.

Visual Specifications

Property	Value
Min-width	180-200px
Max-width	320px
Border Radius	8px
Shadow	Medium elevation
Padding	8px vertical (container)
Item Height	36-44px
Font Size	14px

Position Variants

Bottom Left Bottom Right Top Right

Appears below trigger, left-aligned (default)

Appears below trigger, right-aligned

Appears above trigger (when space limited)

Appears to the right of trigger

Item States

State	Appearance
Default	Transparent background
Hover	Light grey background (#f3f4f6)
Active/Focus	Brand color background
Disabled	Grey with reduced opacity
Selected	Checkmark icon visible
Destructive	Red color for dangerous actions

Dropdown Types

Type	Usage
Action Menu	Commands (Edit, Delete, Share)
Selection	Choose from options
Navigation	Links to other pages
Filter	Filter content by criteria

Usage Guidance

When to use

• Actions that don’t need primary buttons
• Secondary options and commands
• Selecting from a list of options
• Context-specific actions
• When space is limited

Best practices

✅ Do	❌ Don’t
Keep items under 8	Overload with many items
Group related items	Mix unrelated actions
Use clear, concise labels	Vague item names
Show keyboard shortcuts	Hide helpful hints
Include separators for groups	Confusing item hierarchy
Close on selection	Require manual close

Item Guidelines

Item Type	Example
Action	”Edit”, “Delete”, “Share”
Link	”View Profile”, “Settings”
Toggle	”Enable Notifications”
Destructive	”Remove”, “Delete Account”