Skip to main content

Dropdown

Information : Requires Javascript to work.

A dropdown is a menu that appears when a user clicks on a button or link. It is a common design pattern used in websites and applications to provide additional options or functionality to the user.

Design Hints
Dropdown menus are commonly used in websites and applications to provide additional options or functionality to the user. They are also an opportunity to use branding colors and typography to create a consistent and recognizable design. Dropdown menus can be used to filter content, display additional information, or provide a list of actions that the user can take.
Accessiblity Hints
The component in ravixUI follows the accessibility patterns guidelines provided by WAI-ARIA APG specification for menubutton and menu. Dropdown is different from input select because it is not a form element.

The dropdown consists of two main parts:

  • The dropdown button: button that triggers the dropdown menu to appear.
  • The dropdown menu: A menu that appears when the dropdown button is clicked. The list of items are usually actionable, such as links or buttons. It can also contain submenus but this implementation is primarily focused on the dropdown menu without submenus.

Simple Dropdown

A simple dropdown with a list of options.

Alternate Dropdown

A different style for a simple dropdown.

Animated Dropdown

The simple dropdown with animations.

Astrojs Web Component Dropdown

Note : Requires Astrojs to work.

The animated dropdown is available as a web component in ravixUI. You can find the implementation and code below.

The Dropdown is implemented using the Web Components API, which creates a customizable and interactive dropdown menu. It allows you to display a button that, when clicked, reveals a list of menu items. Learn more about Web Components in the MDN Web Docs.

Usage

To use the Dropdown component in your Astro project, follow these steps:

  • Copy the code into a component file (e.g., Dropdown.astro).
  • Import the Dropdown component into your Astro page.
  • Define the necessary props for the dropdown menu.
  • Render the Dropdown component in your Astro page, passing the required props.

Example implementation:

YourPage.astro
---
import Dropdown from "./Dropdown.astro";
const menuLabel = "Select an option";
const menuItems = [
{ label: "Option 1", type: "link", href: "/option1" },
{ label: "Option 2", type: "button", action: "/handle-option2" },
// Add more menu items as needed
];
const xAlignment = "right";
const yAlignment = "top";
---
<Dropdown
menuLabel={menuLabel}
menuItems={menuItems}
xAlignment={xAlignment}
yAlignment={yAlignment}
/>

Data Attributes

The data-dropdown attribute is a custom attribute used to identify and control the behavior of the dropdown component. It is applied to different elements within the dropdown structure, and its value specifies the role of the element. The following values are used:

  • data-dropdown=“button”: This value is applied to the button element that serves as the trigger for the dropdown menu. The button should have the aria-expanded attribute set to “false” initially, indicating that the dropdown menu is collapsed.

  • data-dropdown=“menu”: This value is applied to the <ul> element that represents the dropdown menu. It should have the aria-hidden attribute set to “true” initially, indicating that the menu is hidden.

Component Props

The component accepts the following props:

  • menuLabel (required): The label text for the dropdown menu of type string.
  • xAlignment : The horizontal alignment of the dropdown menu. Can be either left or right (The default value is right).
  • yAlignment : The vertical alignment of the dropdown menu. Can be either top or bottom (The default value is top)
  • menuItems (required): An array of menu item objects. Each object should have the following properties:
PropertyTypeDescription
labelstring (required)The text for the menu item.
typestring (required)The type of the menu item. Can be either link or button.
hrefstringThe URL for the link menu item. Only used if type is link.
actionstringThe action to be performed when the button menu item is clicked. Only used if type is button.

For customization of action you will need to modify the form component controlling the button and change the action to the desired function.

JavaScript Functionality

The Dropdown component includes a JavaScript class (XDropdown) that handles the toggling of the dropdown menu. When the dropdown button is clicked, the menu is expanded or collapsed, and the aria-expanded attribute is updated accordingly. The menu can be closed by clicking outside the dropdown or by pressing the Escape key.

Accessibility

The Dropdown component follows accessibility best practices by using appropriate ARIA attributes:

  • The dropdown button has aria-expanded and aria-haspopup attributes to indicate the state of the dropdown menu and also inform of the popup menu.
  • The dropdown menu has aria-orientation, aria-labelledby, role, and aria-hidden attributes to provide semantic information to assistive technologies.
  • Each menu item has the role menuitem.

The component is provided as-is and may require further testing and customization to fit your specific use case.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple DropdownYesYesYesYesYes
Animated DropdownYesYesYesYesYes
Alternate Animated DropdownYesYesYesYesYes
Astro JS Web ComponentYesYesYesYesYes

The dropdown components are implemented with the WAI-ARIA 1.2 design patterns. The components above implement all the required functionality mention in WAI-ARIA APG specification for menu button and WAI-ARIA APG specification for menu .

The components support keyboard navigation once the dropdown is opened:

Keyboard NavigationDescription
Arrow Up/DownMoves the focus to the previous/next menu item.
EscapeCloses the dropdown menu.
EnterTriggers the action associated with the focused menu item.
Arrow Left/RightMoves the focus to the first/last menu item.
Tab or Shift + TabMoves the focus out of the menu and into the menu button.