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 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 Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall 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 

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>

Caution

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>

Basic Toggle With Fit 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>
    <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>

Basic Toggle With Icon On Left 

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>

Color Context 

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>

Compact Borderless Variant 

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>

Compact 

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>

Disabled 

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>

Drodown Items With Icons 

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>

Dropdown Items With Item Descriptions 

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>

Dropdown With Group Headings 

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>

Info Action Icon Only 

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>
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify