Dropdown Menu

Bundle size WAI-ARIA

A Dropdown, also known as a Dropdown Menu, is a common UI component used to provide users with a list of selectable options in a compact and space-efficient manner. It typically consists of a clickable element (often a button) and a list of items that appear when the user interacts with the component. Users can then choose from the available options in the list.

Example

"use client";

import * as DropdownMenu from "@lora-ui/dropdown-menu";

export default function Base() {
  function onValueChange(value) {
    console.log(value);
  }

  return (
    <DropdownMenu.Root onValueChange={onValueChange}>
      <DropdownMenu.Trigger className="border-box group z-10 mx-auto flex w-[300px] items-center justify-between whitespace-nowrap rounded-lg border border-[#eaecf0] px-[14px] py-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] disabled:pointer-events-none dark:border-[#1f242f] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f]">
        <span className="text-base group-disabled:text-[--app-text-disabled]">
          Dropdown
        </span>
        <svg
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="group-disabled:text-[--app-text-disabled]"
        >
          <path
            d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content className="border-box w-[300px] rounded-lg border border-[#eaecf0] bg-[#ffffff] py-1 dark:border-[#1f242f] dark:bg-[#0c111d]">
        <DropdownMenu.Root isDisabled>
          <DropdownMenu.Trigger className="group block w-[300px] px-[6px] py-[1px] focus:outline-none disabled:pointer-events-none">
            <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] group-disabled:text-[--app-text-disabled] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
              Fruits
              <svg
                width="15"
                height="15"
                viewBox="0 0 15 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                  fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                />
              </svg>
            </div>
          </DropdownMenu.Trigger>
          <DropdownMenu.Content className="border-box w-[300px] rounded-lg border border-[#eaecf0] bg-[#ffffff] py-1 dark:border-[#1f242f] dark:bg-[#0c111d]">
            <DropdownMenu.Item
              value="Apple"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Apple
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              value="Banana"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Banana
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              value="Orange"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Orange
              </div>
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger className="group block w-[300px] px-[6px] py-[1px] focus:outline-none">
            <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
              Colors
              <svg
                width="15"
                height="15"
                viewBox="0 0 15 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                  fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                />
              </svg>
            </div>
          </DropdownMenu.Trigger>
          <DropdownMenu.Content className="border-box w-[300px] rounded-lg border border-[#eaecf0] bg-[#ffffff] py-1 dark:border-[#1f242f] dark:bg-[#0c111d]">
            <DropdownMenu.Item
              value="Red"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Red
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              value="Blue"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Blue
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              value="Green"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Green
              </div>
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger className="group block w-[300px] px-[6px] py-[1px] focus:outline-none">
            <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
              Countries
              <svg
                width="15"
                height="15"
                viewBox="0 0 15 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                  fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                />
              </svg>
            </div>
          </DropdownMenu.Trigger>
          <DropdownMenu.Content className="border-box w-[300px] rounded-lg border border-[#eaecf0] bg-[#ffffff] py-1 dark:border-[#1f242f] dark:bg-[#0c111d]">
            <DropdownMenu.Item
              value="United States"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                United States
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              value="Canada"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f]">
                Canada
              </div>
            </DropdownMenu.Item>
            <DropdownMenu.Item
              isDisabled
              value="Australia"
              className="group block w-full px-[6px] py-[1px] focus:outline-none"
            >
              <div className="flex items-center justify-between py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:rounded-md group-focus:bg-[#f9fafb] group-disabled:pointer-events-none group-disabled:bg-transparent group-disabled:text-[#667085] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] dark:group-disabled:text-[#85888e]">
                Australia
              </div>
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/dropdown-menu

API Reference

Root

Prop	Type	Default	Explanation
isDisabled	Boolean	false	Disabled nearest Trigger when set to true
onValueChange	Function	(value: string) => {}	Callback fn for selected value
duration	Number	0	Dropdown panel showing delay
offsetY	Number	6	Offset value for Dropdown panel

Trigger

Prop	Type	Default	Explanation

Content

Prop	Type	Default	Explanation

Item

Prop	Type	Default	Explanation
value	String		typeahead value
isDisabled	Boolean	false

Keyboard

Command	Description
Space	Activates the focused item.
Enter	Activates the focused item.
Escape	Closes the popup if the popup is visible
ArrowRight	Open submenu and focus the first menuitem in submenu.
ArrowLeft	Close submenu and focus on the parent of submenu.
ArrowDown	If popup is closed, open the popup and moves focus to the first menuitem, if already focus on menuitem and moves focus to next one.
ArrowUp	If popup is closed, open the popup and moves focus to the last menuitem, if already focus on menuitem and moves focus to previous one.
A-Z and a-z	Focus a menuitem that starts with the typed characters in current menu when popup is open.

Other

All relevant ARIA attributes are automatically managed.