Dropdown Menus

A simple menu overlay panel that drops from a trigger.

Overview

Dropdown menu is a variant of the overlay panel component optimized for building menus.

Enable local navigation between related pages with dropdown menus. Use this component at small viewports or when space is at a premium. The default variant uses a select as the trigger for the overlay panel. It accepts the array items containing label and href pairs.

Dropdown menus can accept a different trigger element using the trigger slot.

Dos and Don'ts

Do
  • Do use when revealing tertiary navigation, such as a settings menu. This component provides styling and a simple API for this use case.
Don't
  • Don't use when heavy customization is required. Prefer the more flexible overlay panel instead.

Installation

Props

Slots