Plus UI ↗️Be Our Sponsor ↗️

Dropdown

Easily Navigate Your Choices with Dropdown Component

The Dropdown Component is an essential UI element designed to offer users a compact and efficient way to select one or more options from a list. Perfect for conserving screen real estate while maintaining an intuitive and accessible selection process, the dropdown is ideal for forms, filters, and anywhere user choice is needed. Its seamless integration and customization options make it a versatile tool for any application.

Anatomy

The anatomy of the Dropdown Component consists of a trigger element, often displayed as a button or field, that users interact with to reveal the options list. This list is dynamically populated and can support various item types, including text, icons, or even custom templates. Optional elements like search fields or section dividers further enhance usability and organization within the dropdown.

anatomy of dropdown component

Properties

The Plus UI Dropdown Component offers customizable properties to fit various design and functionality needs, categorized into kinds, size, and orientation.

Kind
Size
Orientation

Button

Small

Right

Button Group

Medium

Middle

Avatar

Large

Left

Kinds

  • Button Dropdown Component integrates a dropdown with a button, ideal for actions or options.

  • Button Group Dropdown Component is a group of buttons, for cohesive multiple actions.

  • Avatar Dropdown Component is attached to an avatar, perfect for user profile or settings options

import React from 'react';
import { PlusDropdown, PlusDropdownMenu, PlusDropdownItem } from '@plusui/react';

const DropdownExample = () => (
  <PlusDropdown text="Select an Option">
    <PlusDropdownMenu>
      <PlusDropdownItem>Profile Settings</PlusDropdownItem>
      <PlusDropdownItem>Account Information</PlusDropdownItem>
      <PlusDropdownItem>Security & Privacy</PlusDropdownItem>
      <PlusDropdownItem>Billing & Subscription</PlusDropdownItem>
      <PlusDropdownItem>Log Out</PlusDropdownItem>
    </PlusDropdownMenu>
  </PlusDropdown>
);

export default DropdownExample;

Size

  • Small Dropdown Component is compact, for limited spaces or minimalist designs.

  • Medium Dropdown Component is the standard size, suitable for most applications.

  • Large Dropdown Component offers more space for options, enhancing readability.

import React from 'react';
import { PlusDropdown, PlusDropdownMenu, PlusDropdownItem } from '@plusui/react';

const DropdownWithSizes = () => (
  <>
    <PlusDropdown text="Small Dropdown" size="sm">
      <PlusDropdownMenu>
        <PlusDropdownItem>Item 1</PlusDropdownItem>
        <PlusDropdownItem>Item 2</PlusDropdownItem>
      </PlusDropdownMenu>
    </PlusDropdown>

    <PlusDropdown text="Medium Dropdown" size="md">
      <PlusDropdownMenu>
        <PlusDropdownItem>Item 1</PlusDropdownItem>
        <PlusDropdownItem>Item 2</PlusDropdownItem>
        <PlusDropdownItem>Item 3</PlusDropdownItem>
      </PlusDropdownMenu>
    </PlusDropdown>

    <PlusDropdown text="Large Dropdown" size="lg">
      <PlusDropdownMenu>
        <PlusDropdownItem>Item 1</PlusDropdownItem>
        <PlusDropdownItem>Item 2</PlusDropdownItem>
        <PlusDropdownItem>Item 3</PlusDropdownItem>
        <PlusDropdownItem>Item 4</PlusDropdownItem>
      </PlusDropdownMenu>
    </PlusDropdown>
  </>
);

export default DropdownWithSizes;

Orientation

  • Right-Oriented Dropdown Component aligns to the right, useful for right-aligned interfaces.

  • Middle-Orientated Dropdown Component centers the dropdown, ideal for balanced designs.

  • Left-Orientated Dropdown Component aligns the dropdown to the left, supporting left-aligned layouts.

import React from 'react';
import { PlusDropdown, PlusDropdownMenu, PlusDropdownItem } from '@plusui/react';

// 'orientation' accepts the following values:
// 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end',
// 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'.

const DropdownWithOrientation = () => (
  <PlusDropdown text="Select an Option" orientation="bottom-start">
    <PlusDropdownMenu>
      <PlusDropdownItem>Item 1</PlusDropdownItem>
      <PlusDropdownItem>Item 2</PlusDropdownItem>
      <PlusDropdownItem>Item 3</PlusDropdownItem>
    </PlusDropdownMenu>
  </PlusDropdown>
);

export default DropdownWithOrientation;

Layout & Spacing

The Plus UI Dropdown Component is crafted with meticulous attention to layout and spacing, ensuring that each element is perfectly positioned for optimal readability and accessibility. The spacing between options is carefully calibrated to prevent accidental selections, while the overall layout is designed to be fluid and adaptable to any screen size, maintaining its aesthetic integrity and functionality across devices.

Layout and spacing of dropdown component

Light & Dark Mode

Designed to flawlessly integrate with any design aesthetic, the Plus UI Dropdown Component offers full support for light and dark modes. It automatically adjusts its colors based on the user's system preferences or application settings, providing a visually cohesive experience that reduces eye strain and enhances usability in varying lighting conditions.

light and dark mode of dropdown component

Accessibility

Accessibility is paramount in the design of the Plus UI Dropdown Component. It is fully compliant with modern web accessibility standards, including keyboard navigation and screen reader support. ARIA roles and attributes are thoughtfully applied to ensure that all users can navigate and select options with ease, making the dropdown component a model of inclusivity and user-centric design.

Criteria
Description
Status

ARIA Attributes

Ensures ARIA attributes are allowed for an element's role

✔️ Passed

ARIA Hidden Elements

Ensure the autocomplete attribute is correct and suitable for the form field

✔️ Passed

ARIA Valid Values

Ensures all ARIA attributes have valid values

✔️ Passed

ARIA Valid Names

Ensures attributes that begin with aria- are valid ARIA attributes

✔️ Passed

Discernible Text

Ensures buttons have discernible text

✔️ Passed

ID Attributes

Ensures every id attribute value is unique

✔️ Passed

Interactive Controls

Ensures interactive controls are not nested as they are not always announced by screen readers 
or can cause focus problems for assistive technologies

✔️ Passed

Tabindex Attribute

Ensures tabindex attribute values are not greater than 0

✔️ Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds.

✔️ AA ~ AAA

Design System

LogoPlus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma

API

Property
Description
Type
Accepted Values
Default

text

The displayed text of the dropdown button

String

Any valid string

null

orientation

Determines the dropdown's opening direction

String

top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

bottom

size

Sets the size of the dropdown

String

sm, md, lg

md

kind

Sets the style of the dropdown button

String

default, primary

default

disabled

Disables the dropdown button

Boolean

true, false

false

PreviousDrawerNextInput

Last updated

Was this helpful?