Dropdown — Vanilla

Dropdown menu with vanilla HTML + JS. Same component and behavior as Astro; ensure Rizzo CSS is loaded.

Dropdown

An accessible dropdown menu component for displaying lists of actions or options. This page uses the same Astro Dropdown component so the live examples look and function identically to the Astro dropdown.

Add this component

The command below includes <strong>Dropdown</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Basic Usage

Live Example

With Links

Live Example

With Disabled Items

Live Example

Menu Positioning

Live Examples

Left

Right

Minimal Vanilla HTML + JS

For a minimal custom implementation, use the same BEM classes and toggle aria-expanded and menu visibility. Full keyboard navigation and submenus require the script used by the Astro Dropdown component.

html html 
<div class="dropdown" data-dropdown="my-menu">
  <button type="button" class="dropdown__trigger" id="my-menu-trigger"
    aria-expanded="false" aria-haspopup="true" aria-controls="my-menu-menu">
    <span class="dropdown__trigger-text">Menu</span>
    <span class="dropdown__icon" aria-hidden="true"><!-- chevron SVG --></span>
  </button>
  <div class="dropdown__menu" id="my-menu-menu" role="menu" aria-hidden="true" tabindex="-1">
    <div class="dropdown__item-wrapper">
      <div class="dropdown__item" role="menuitem" data-dropdown-value="a" data-dropdown-onclick="myHandler">Item A</div>
    </div>
  </div>
</div>
<!-- Use the same init script as in Dropdown.astro for full behavior -->

Other frameworks: Astro · Svelte · Vue · React