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

React

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;

Angular

<plus-dropdown text="Select an Option">
  <plus-dropdown-menu>
    <plus-dropdown-item>Profile Settings</plus-dropdown-item>
    <plus-dropdown-item>Account Information</plus-dropdown-item>
    <plus-dropdown-item>Security & Privacy</plus-dropdown-item>
    <plus-dropdown-item>Billing & Subscription</plus-dropdown-item>
    <plus-dropdown-item>Log Out</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

Vue

<template>
  <plus-dropdown text="Select an Option">
    <plus-dropdown-menu>
      <plus-dropdown-item>Profile Settings</plus-dropdown-item>
      <plus-dropdown-item>Account Information</plus-dropdown-item>
      <plus-dropdown-item>Security & Privacy</plus-dropdown-item>
      <plus-dropdown-item>Billing & Subscription</plus-dropdown-item>
      <plus-dropdown-item>Log Out</plus-dropdown-item>
    </plus-dropdown-menu>
  </plus-dropdown>
</template>

Javascript

<plus-dropdown text="Select an Option">
  <plus-dropdown-menu>
    <plus-dropdown-item>Profile Settings</plus-dropdown-item>
    <plus-dropdown-item>Account Information</plus-dropdown-item>
    <plus-dropdown-item>Security & Privacy</plus-dropdown-item>
    <plus-dropdown-item>Billing & Subscription</plus-dropdown-item>
    <plus-dropdown-item>Log Out</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

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.

React

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;

Angular

<plus-dropdown text="Small Dropdown" size="sm">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

<plus-dropdown text="Medium Dropdown" size="md">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

<plus-dropdown text="Large Dropdown" size="lg">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
    <plus-dropdown-item>Item 4</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

Vue

<template>
  <plus-dropdown text="Small Dropdown" size="sm">
    <plus-dropdown-menu>
      <plus-dropdown-item>Item 1</plus-dropdown-item>
      <plus-dropdown-item>Item 2</plus-dropdown-item>
    </plus-dropdown-menu>
  </plus-dropdown>

  <plus-dropdown text="Medium Dropdown" size="md">
    <plus-dropdown-menu>
      <plus-dropdown-item>Item 1</plus-dropdown-item>
      <plus-dropdown-item>Item 2</plus-dropdown-item>
      <plus-dropdown-item>Item 3</plus-dropdown-item>
    </plus-dropdown-menu>
  </plus-dropdown>

  <plus-dropdown text="Large Dropdown" size="lg">
    <plus-dropdown-menu>
      <plus-dropdown-item>Item 1</plus-dropdown-item>
      <plus-dropdown-item>Item 2</plus-dropdown-item>
      <plus-dropdown-item>Item 3</plus-dropdown-item>
      <plus-dropdown-item>Item 4</plus-dropdown-item>
    </plus-dropdown-menu>
  </plus-dropdown>
</template>

Javascript

<plus-dropdown text="Small Dropdown" size="sm">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

<plus-dropdown text="Medium Dropdown" size="md">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

<plus-dropdown text="Large Dropdown" size="lg">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
    <plus-dropdown-item>Item 4</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

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.

React

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;

Angular

<!-- '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'. -->

<plus-dropdown text="Select an Option" orientation="bottom-start">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

Vue

<template>
<!-- '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'. -->

  <plus-dropdown text="Select an Option" orientation="bottom-start">
    <plus-dropdown-menu>
      <plus-dropdown-item>Item 1</plus-dropdown-item>
      <plus-dropdown-item>Item 2</plus-dropdown-item>
      <plus-dropdown-item>Item 3</plus-dropdown-item>
    </plus-dropdown-menu>
  </plus-dropdown>
</template>

Javascript

<!-- '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'. -->

<plus-dropdown text="Select an Option" orientation="bottom-start">
  <plus-dropdown-menu>
    <plus-dropdown-item>Item 1</plus-dropdown-item>
    <plus-dropdown-item>Item 2</plus-dropdown-item>
    <plus-dropdown-item>Item 3</plus-dropdown-item>
  </plus-dropdown-menu>
</plus-dropdown>

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

Plus 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