About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Menu

<terra-menu> | TerraMenu
Since 1.0 stable

Menus provide a list of options for the user to choose from.

Menu

Menus provide a list of options for the user to choose from. They’re typically used inside dropdowns, but can be used standalone as well.

Examples

Basic Menu

A simple menu with menu items.

Edit Duplicate Delete 
<terra-menu>
  <terra-menu-item>Edit</terra-menu-item>
  <terra-menu-item>Duplicate</terra-menu-item>
  <terra-menu-item>Delete</terra-menu-item>
</terra-menu>

Add icons to menu items using the prefix or suffix slots.

Edit Duplicate Delete 
<terra-menu>
  <terra-menu-item>
    <terra-icon slot="prefix" name="pencil" library="system"></terra-icon>
    Edit
  </terra-menu-item>
  <terra-menu-item>
    <terra-icon slot="prefix" name="copy" library="system"></terra-icon>
    Duplicate
  </terra-menu-item>
  <terra-menu-item>
    <terra-icon slot="prefix" name="trash" library="system"></terra-icon>
    Delete
  </terra-menu-item>
</terra-menu>

Checkbox Menu Items

Use checkbox menu items for multi-select scenarios.

Option 1 Option 2 Option 3 
<terra-menu>
  <terra-menu-item type="checkbox">Option 1</terra-menu-item>
  <terra-menu-item type="checkbox" checked>Option 2</terra-menu-item>
  <terra-menu-item type="checkbox">Option 3</terra-menu-item>
</terra-menu>

Disabled Menu Items

Disable menu items to prevent selection.

Enabled Item Disabled Item Another Enabled Item 
<terra-menu>
  <terra-menu-item>Enabled Item</terra-menu-item>
  <terra-menu-item disabled>Disabled Item</terra-menu-item>
  <terra-menu-item>Another Enabled Item</terra-menu-item>
</terra-menu>

Loading Menu Items

Show a loading state on menu items.

Normal Item Loading Item Another Normal Item 
<terra-menu>
  <terra-menu-item>Normal Item</terra-menu-item>
  <terra-menu-item loading>Loading Item</terra-menu-item>
  <terra-menu-item>Another Normal Item</terra-menu-item>
</terra-menu>

Use dividers to visually group menu items.

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 
<terra-menu style="max-width: 200px;">
  <terra-menu-item value="1">Option 1</terra-menu-item>
  <terra-menu-item value="2">Option 2</terra-menu-item>
  <terra-menu-item value="3">Option 3</terra-menu-item>
  <terra-divider></terra-divider>
  <terra-menu-item value="4">Option 4</terra-menu-item>
  <terra-menu-item value="5">Option 5</terra-menu-item>
  <terra-menu-item value="6">Option 6</terra-menu-item>
</terra-menu>

Menus are typically used inside dropdowns.

Actions Edit Duplicate Delete 
<terra-dropdown>
  <terra-button slot="trigger" caret>Actions</terra-button>
  <terra-menu>
    <terra-menu-item>Edit</terra-menu-item>
    <terra-menu-item>Duplicate</terra-menu-item>
    <terra-menu-item>Delete</terra-menu-item>
  </terra-menu>
</terra-dropdown>

Handling Selection

Listen for the terra-select event to handle menu item selection.

Edit Duplicate Delete 
<terra-menu id="select-menu">
  <terra-menu-item value="edit">Edit</terra-menu-item>
  <terra-menu-item value="duplicate">Duplicate</terra-menu-item>
  <terra-menu-item value="delete">Delete</terra-menu-item>
</terra-menu>

<script>
  const menu = document.getElementById('select-menu');
  menu.addEventListener('terra-select', (event) => {
    alert(`Selected: ${event.detail.item.value || event.detail.item.getTextLabel()}`);
  });
</script>

Accessibility

The menu component follows accessibility best practices:

  • Uses proper ARIA attributes (role="menu")
  • Supports keyboard navigation (Arrow keys, Home, End, Enter, Space)
  • Implements roving tabindex for focus management
  • Works with screen readers

Keyboard Shortcuts

Key Action
Arrow Down Moves focus to the next item
Arrow Up Moves focus to the previous item
Home Moves focus to the first item
End Moves focus to the last item
Enter or Space Selects the focused item

[component-metadata:terra-menu]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/menu/menu.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/menu/menu.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/menu/menu.js';

To import this component as a React component:

import TerraMenu from '@nasa-terra/components/dist/react/menu';

Slots

Name Description
(default) The menu’s content, typically <terra-menu-item> elements.

Learn more about using slots.

Events

Name React Event Description Event Detail
terra-select onTerraSelect Emitted when a menu item is selected. The event detail contains the selected menu item. -

Learn more about events.