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
Menu dropdownBasic Toggle With Anchor LinksBasic Toggle With Fit TextBasic Toggle With Icon On LeftColor ContextCompact Borderless VariantCompactDisabledDrodown Items With IconsDropdown Items With Item DescriptionsDropdown With Group HeadingsInfo Action Icon OnlyMenu dropdownBasic Toggle With Anchor LinksBasic Toggle With Fit TextBasic Toggle With Icon On LeftColor ContextCompact Borderless VariantCompactDisabledDrodown Items With IconsDropdown Items With Item DescriptionsDropdown With Group HeadingsInfo Action Icon Only

Menu dropdown

Basic menu dropdown with action items, a disabled item, and an HR separator.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<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>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Menu dropdown with anchor link items, including disabled and external links. Avoid mixing standard menu actions (i.e., "buttons") with links within the same menu dropdown, as doing so could cause confusion around the expected behavior of each menu item.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle with links</span>
    <rh-menu-item href="#">Link one</rh-menu-item>
    <rh-menu-item href="#">Link two</rh-menu-item>
    <rh-menu-item href="#">Link three</rh-menu-item>
    <rh-menu-item disabled="" href="#">Disabled link</rh-menu-item>
    <hr>
    <rh-menu-item href="#">Separated link</rh-menu-item>
    <rh-menu-item href="#" external="">Separated, external link</rh-menu-item>
  </rh-menu-dropdown>
</div>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle with links</span>
      <MenuItem href="#">Link one</MenuItem>
      <MenuItem href="#">Link two</MenuItem>
      <MenuItem href="#">Link three</MenuItem>
      <MenuItem disabled href="#">Disabled link</MenuItem>
      <hr />
      <MenuItem href="#">Separated link</MenuItem>
      <MenuItem href="#" external>Separated, external link</MenuItem>
    </MenuDropdown>
  </div>
);

Basic Toggle With Fit Text

Menu dropdown where the toggle width fits its text content.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;
}
 
<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>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Basic Toggle With Icon On Left

Menu dropdown with an icon placed before the toggle label text.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <rh-icon slot="toggle-label" set="ui" icon="auto-light-dark-mode"></rh-icon>
    <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>
 
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <Icon slot="toggle-label" set="ui" icon="auto-light-dark-mode" />
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Color Context

Menu dropdown rendered across multiple color contexts (light and dark).

rh-context-demo::part(demo) {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--rh-space-lg, 16px);
}
 
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
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);
});
 
<rh-context-demo>
  <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>
</rh-context-demo>
 
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </ContextDemo>
);

Compact Borderless Variant

Compact menu dropdown with borderless variant, using a vertical ellipsis icon toggle.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown variant="borderless" layout="compact" accessible-label="Toggle menu">
    <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>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown variant="borderless" layout="compact" accessible-label="Toggle menu">
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Compact

Compact layout menu dropdown with a vertical ellipsis icon as the toggle.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown layout="compact" accessible-label="Toggle menu">
    <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>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown layout="compact" accessible-label="Toggle menu">
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Disabled

Menu dropdown in a disabled state, preventing user interaction.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown disabled="">
    <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>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown disabled>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);

Drodown Items With Icons

Menu dropdown with icons displayed alongside each menu item.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle</span>
    <rh-menu-item><rh-icon slot="icon" set="ui" icon="profile"></rh-icon> Action one</rh-menu-item>
    <rh-menu-item><rh-icon slot="icon" set="ui" icon="profile"></rh-icon> Action two</rh-menu-item>
    <rh-menu-item><rh-icon slot="icon" set="ui" icon="profile"></rh-icon> Action three</rh-menu-item>
    <rh-menu-item disabled=""><rh-icon slot="icon" set="ui" icon="profile"></rh-icon> Disabled Action</rh-menu-item>
    <hr>
    <rh-menu-item><rh-icon slot="icon" set="ui" icon="document"></rh-icon> Separated action</rh-menu-item>
  
  </rh-menu-dropdown>
</div>
 
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>
        <Icon slot="icon" set="ui" icon="profile" />
        Action one
      </MenuItem>
      <MenuItem>
        <Icon slot="icon" set="ui" icon="profile" />
        Action two
      </MenuItem>
      <MenuItem>
        <Icon slot="icon" set="ui" icon="profile" />
        Action three
      </MenuItem>
      <MenuItem disabled>
        <Icon slot="icon" set="ui" icon="profile" />
        Disabled Action
      </MenuItem>
      <hr />
      <MenuItem>
        <Icon slot="icon" set="ui" icon="document" />
        Separated action
      </MenuItem>
    </MenuDropdown>
  </div>
);

Dropdown Items With Item Descriptions

Menu dropdown where each item includes a supplementary description.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle</span>
    <rh-menu-item>Action one <p slot="description">Description for the 1st action</p></rh-menu-item>
    <rh-menu-item>Action two <p slot="description">Description for the 2nd action</p></rh-menu-item>
    <rh-menu-item>Action three <p slot="description">Description for the 3rd action</p></rh-menu-item>
    <rh-menu-item disabled="">Disabled Action <p slot="description">Description for a disabled action</p></rh-menu-item>
    <hr>
    <rh-menu-item>Separated action <p slot="description">Description for a separate action</p></rh-menu-item>
  </rh-menu-dropdown>
</div>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItem>
        Action one
        <p slot="description">Description for the 1st action</p>
      </MenuItem>
      <MenuItem>
        Action two
        <p slot="description">Description for the 2nd action</p>
      </MenuItem>
      <MenuItem>
        Action three
        <p slot="description">Description for the 3rd action</p>
      </MenuItem>
      <MenuItem disabled>
        Disabled Action
        <p slot="description">Description for a disabled action</p>
      </MenuItem>
      <hr />
      <MenuItem>
        Separated action
        <p slot="description">Description for a separate action</p>
      </MenuItem>
    </MenuDropdown>
  </div>
);

Dropdown With Group Headings

Menu dropdown with items organized under group headings using rh-menu-item-group.

import '@rhds/elements/rh-menu-dropdown/rh-menu-dropdown.js';
import '@rhds/elements/rh-menu/rh-menu-item.js';
import '@rhds/elements/rh-menu/rh-menu-item-group.js';

const dropdown = document.querySelector('rh-menu-dropdown');
dropdown.addEventListener('select', e => {
  console.log('Selected:', e.text);
});
 
#menu-dropdown-container {
  padding: 1rem;

  rh-menu-dropdown {
    width: 296px;
  }
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle</span>
    <rh-menu-item-group group-heading="Group heading">
      <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>
    </rh-menu-item-group>
    <hr>
    <rh-menu-item-group group-heading="Group heading">
      <rh-menu-item>Separated action</rh-menu-item>
      <rh-menu-item>Separated action two</rh-menu-item>
    </rh-menu-item-group>
  </rh-menu-dropdown>
</div>
 
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";
import { MenuItemGroup } from "@rhds/elements/react/rh-menu-item-group/rh-menu-item-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <span slot="toggle-label">Basic toggle</span>
      <MenuItemGroup group-heading="Group heading">
        <MenuItem>Action one</MenuItem>
        <MenuItem>Action two</MenuItem>
        <MenuItem>Action three</MenuItem>
        <MenuItem disabled>Disabled Action</MenuItem>
      </MenuItemGroup>
      <hr />
      <MenuItemGroup group-heading="Group heading">
        <MenuItem>Separated action</MenuItem>
        <MenuItem>Separated action two</MenuItem>
      </MenuItemGroup>
    </MenuDropdown>
  </div>
);

Info Action Icon Only

Menu dropdown using only an icon as the toggle label, with no visible text.

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);
});
 
#menu-dropdown-container {
  padding: 1rem;
}
 
<div id="menu-dropdown-container">
  <rh-menu-dropdown>
    <rh-icon accessible-label="Toggle menu" slot="toggle-label" set="ui" icon="auto-light-dark-mode"></rh-icon>
    <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>
 
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { MenuDropdown } from "@rhds/elements/react/rh-menu-dropdown/rh-menu-dropdown.js";
import { MenuItem } from "@rhds/elements/react/rh-menu-item/rh-menu-item.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="menu-dropdown-container">
    <MenuDropdown>
      <Icon accessible-label="Toggle menu" slot="toggle-label" set="ui" icon="auto-light-dark-mode" />
      <MenuItem>Action one</MenuItem>
      <MenuItem>Action two</MenuItem>
      <MenuItem>Action three</MenuItem>
      <MenuItem disabled>Disabled Action</MenuItem>
      <hr />
      <MenuItem>Separated action</MenuItem>
    </MenuDropdown>
  </div>
);
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify