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>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>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
| Slot Name | Summary | Description |
|---|---|---|
Toggle label |
Inline content for the toggle button, such as a
|
|
Menu content |
Must contain |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
open |
whether the dropdown is currently open. |
|
|
|
|
variant |
Defines the visual style of the dropdown. Setting it to 'borderless' removes the default border styling. |
|
|
|
|
layout |
The 'compact' layout reduces spacing and add the rh-icon |
|
|
|
|
disabled |
Disables user interaction with the dropdown. When true, the dropdown cannot be opened or interacted with, and appears visually disabled. |
|
|
|
|
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. |
|
|
Methods
| Method Name | Description |
|---|---|
|
|
Moves focus to the currently active (focused) item. |
Events
| Event Name | Description |
|---|---|
|
|
Fired when a user selects an
action or link from the menu. The event detail includes the selected
|
CSS Shadow Parts
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-menu-dropdown-panel-padding |
Menu panel padding |
var(--rh-space-md, 8px) 0
|
--rh-menu-dropdown-panel-border-radius |
Menu panel corner rounding |
var(--rh-border-radius-default, 3px)
|
--rh-menu-dropdown-panel-border |
Menu panel border |
var(--_border)
|
--rh-menu-dropdown-panel-background |
Menu panel background |
light-dark(
/** Menu panel background in light mode */
var(--rh-color-surface-lightest, #ffffff),
/** Menu panel background in dark mode */
var(--rh-color-surface-darkest, #151515)
)
|
--rh-menu-dropdown-panel-box-shadow |
Menu panel elevation shadow |
var(--rh-box-shadow-md, 0 4px 6px 1px rgba(21, 21, 21, 0.25))
|
--rh-menu-dropdown-toggle-background |
Toggle button background |
light-dark(
/** Toggle background in light mode */
var(--rh-color-surface-lightest, #ffffff),
/** Toggle background in dark mode */
var(--rh-color-surface-darkest, #151515)
)
|
--rh-menu-dropdown-caret-size |
10px
|
|
--rh-menu-dropdown-hover-border-color |
Toggle hover border color |
var(--_interactive-border-color)
|
--rh-menu-dropdown-active-border-color |
Toggle active border color |
var(--_interactive-border-color)
|
--rh-menu-dropdown-open-border-color |
Toggle open border color |
var(--_interactive-border-color)
|
--rh-menu-dropdown-focus-border-color |
Toggle focus border color Toggle focus border color |
var(--_interactive-border-color)
|
--rh-menu-dropdown-disabled-box-shadow |
Disabled toggle border; default preserves the boxed border |
inset 0 0 0 1px var(--rh-menu-dropdown-toggle-border-color,
light-dark(var(--rh-color-gray-30, #c7c7c7), var(--rh-color-gray-50, #707070)))
|
--rh-menu-dropdown-toggle-border-color |
Toggle default border color |
light-dark(var(--rh-color-gray-30, #c7c7c7), var(--rh-color-gray-50, #707070))
|
--rh-menu-dropdown-compact-size |
Compact toggle minimum square dimensions |
auto
|
--rh-menu-dropdown-compact-justify |
Compact toggle content alignment |
space-between
|
--rh-menu-dropdown-compact-disabled-background |
Disabled compact toggle background |
light-dark(
/** Disabled compact background in light mode */
var(--rh-color-gray-30, #c7c7c7),
/** Disabled compact background in dark mode */
var(--rh-color-gray-40, #a3a3a3)
)
|
--rh-menu-dropdown-compact-disabled-icon-color |
Disabled compact icon color |
light-dark(var(--rh-color-gray-50, #707070), var(--rh-color-gray-60, #4d4d4d))
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-border-width-sm
|
Menu Dropdown Border width Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional. |
|
--rh-color-text-primary
|
Default text color |
|
--rh-box-shadow-md
|
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
|
Toggle button corner rounding Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
--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 Active border spread width 2px length token |
|
--rh-color-gray-30
|
Border color in light mode Disabled compact background in light mode Disabled background in light mode Subtle borders (light scheme) |
|
--rh-color-gray-40
|
Disabled compact background in dark mode Disabled background in dark mode Subtle icon (hover state) |
|
--rh-space-md
|
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 Disabled text color in light mode Subtle icon |
|
--rh-color-gray-60
|
Disabled text color in dark mode Secondary text (light scheme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
