Back

Figma Kit /

Components

/

Dropdown

Dropdowns provide a compact way to present multiple options or actions to users, revealing choices upon interaction.

Components:

  • Trigger element (e.g., button or text field)

  • Dropdown menu containing selectable options

  • Optional search functionality for filtering options

  • Support for icons, avatars, and additional information in menu items

Features:

  • Single and multi-select capabilities

  • Customizable menu item styles (e.g., checkboxes, radio buttons)

  • Keyboard navigation support

  • Option to group related items

  • Ability to include action items (e.g., "Upgrade Now")

Design considerations:

  1. Clear visual feedback for hover and selected states

  2. Consistent styling and spacing of menu items

  3. Appropriate use of icons or avatars to enhance recognition

  4. Consider the placement of the dropdown to avoid obscuring important content

  5. Ensure sufficient contrast between the dropdown and the background

Implementation notes:

  1. Implement keyboard accessibility (arrow keys, Enter, Esc)

  2. Provide a clear visual indicator for the dropdown's open state

  3. Consider adding a subtle animation for opening/closing the dropdown

  4. Ensure the dropdown closes when clicking outside or selecting an option (unless multi-select)

  5. For long lists, implement scrolling within the dropdown menu

This is a part of SegmentUI Pro. SegmentUI Pro is a complete UI kit & component library for Figma & Framer

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

A 360° Design Solution

Constantly updating, constantly evolving tools for Framer and Figma. Build more, design faster, sell more, charge more

For Framer

For Figma