Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Menu dropdown

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-menu-dropdownImportingUsagerh-menu-dropdown

Importing

Add rh-menu-dropdown to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-menu-dropdown/rh-menu-dropdown.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle</span>
    <rh-menu-item>Action one</rh-menu-item>
    <rh-menu-item>Action two</rh-menu-item>
    <rh-menu-item>Action three</rh-menu-item>
    <rh-menu-item disabled="">Disabled Action</rh-menu-item>
    <hr>
    <rh-menu-item>Separated action</rh-menu-item>
  </rh-menu-dropdown>
</div>

<script type="module">
  import '@rhds/elements/rh-menu-dropdown/rh-menu-dropdown.js';
  import '@rhds/elements/rh-menu/rh-menu-item.js';

  const dropdown = document.querySelector('rh-menu-dropdown');
  dropdown.addEventListener('select', e => {
    console.log('Selected:', e.text);
  });
</script>

<style>
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
</style>
Copy to Clipboard Wrap lines

rh-menu-dropdown

A toggle button that reveals a list of actions or links, for use when space is limited or context-specific options are needed. Users must interact with the toggle to expand or collapse the menu. Supports keyboard navigation: Enter, Space, or ArrowDown opens the menu; Escape closes it. Screen readers should perceive the toggle via aria-haspopup and aria-expanded. Compact variants must set accessible-label for assistive technologies.

Slots 2

Slot Name Summary Description
toggle-label

Toggle label

Inline content for the toggle button, such as a <span> or <rh-icon>. Should be short and descriptive. Screen readers announce this as the accessible name for the menu button. Not used in compact layout; use accessible-label instead.
[default]

Menu content

Must contain <rh-menu-item> elements. May include <hr> separators or <rh-menu-item-group> for grouped items. Items receive ARIA menuitem role and focus via roving tabindex for keyboard and screen reader navigation.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 5

Attribute DOM Property Description Type Default
open open

whether the dropdown is currently open.

 
boolean
 
false
variant variant

Defines the visual style of the dropdown. Setting it to 'borderless' removes the default border styling.

 
'borderless'
 
unknown
layout layout

The 'compact' layout reduces spacing and add the rh-icon ellipsis-vertical-fill.

 
'compact'
 
unknown
disabled disabled

Disables user interaction with the dropdown. When true, the dropdown cannot be opened or interacted with, and appears visually disabled.

 
boolean
 
false
accessible-label accessibleLabel

Provides an accessible name for the dropdown's trigger, improving screen reader support. This label is announced to assistive technologies to describe the purpose of the compact menu dropdown.

 
string
 
'Toggle menu'

Methods 2

Method Name Description
firstUpdated()
focus()

Moves focus to the currently active (focused) item.

Events 1

Event Name Description
select

Fired when a user selects an action or link from the menu. The event detail includes the selected RhMenuItem element and its text content.

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 22

Token Description Copy
--rh-border-width-sm

Menu Dropdown Border width

1px border width; Example: Secondary CTA or Button
--rh-color-text-primary

Default text color
--rh-box-shadow-md

Menu panel elevation shadow

Medium box shadow
--rh-color-accent-base-on-light

Interactive border color in light mode

Inline link (light theme)
--rh-color-accent-base-on-dark

Interactive border color in dark mode

Inline link (dark theme)
--rh-font-family-body-text

Toggle label font family

Toggle button font family

Body text font family
--rh-font-size-body-text-md

Toggle label font size

Toggle button font size

16px font size
--rh-font-weight-body-text-regular

Toggle label font weight

Toggle button font weight

Regular font weight
--rh-line-height-code

Toggle label line height

Toggle button line height

Line height for code
--rh-space-sm

Toggle button block padding

6px spacer
--rh-space-lg

Toggle button inline padding

16px spacer
--rh-border-radius-default

Menu panel corner rounding

Toggle button corner rounding

3px border radius; Example: Card
--rh-color-surface-lightest

Menu panel background in light mode

Toggle background in light mode

Primary surface (light theme)
--rh-color-surface-darkest

Menu panel background in dark mode

Toggle background in dark mode

Primary surface (dark theme)
--rh-color-surface-lighter

Compact hover background in light mode

Tertiary surface (light theme)
--rh-color-surface-darker

Compact hover background in dark mode

Secondary surface (dark theme)
--rh-length-3xs

Active border spread width

Focus outline width

Focus outline offset

Open border spread width

Focus outline width

Focus outline offset

Focus/active border spread width

2px length token
--rh-color-gray-30

Border color in light mode

Boxed border color in light mode

Disabled background in light mode

Subtle borders (light theme)
--rh-color-gray-40

Disabled background in dark mode

Subtle icon (hover state)
--rh-space-md

Menu panel block padding

Space between label and caret icon

Compact toggle padding

Space after slotted icon in toggle label

8px spacer
--rh-color-gray-50

Border color in dark mode

Boxed border color in dark mode

Disabled text color in light mode

Subtle icon
--rh-color-gray-60

Disabled text color in dark mode

Secondary text (light theme)
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify