Menu

The menu component displays a list of choices for a user, enabling them to select actions.

The menu behaves like the menus displayed at the top of many desktop applications. When a user activates a choice in a menu, the menu usually either closes or opens a submenu.

Use cases:

• creating a menu bar in the style of a classic desktop application
• creating a menu for interacting with a component

While any DOM content is permissible as a child of the menu, only <rapid-menu-item>s and slotted content with a role of menuitem, menuitemcheckbox, or menuitemradio will receive keyboard support.

Example

In the example below, the first three menu items behave like buttons that you can apply actions to. Menu items 4 and 5 function as radio buttons where only one can be selected at a time.

Menu item 1Menu item 2Menu item 3Menu item 4Menu item 5

React

Declaration

<rapid-menu>
  <rapid-menu-item></rapid-menu-item>
  <rapid-menu-item></rapid-menu-item>
</rapid-menu>

Usage

import { MenuItem } from '@genesislcap/web-core';

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-menu @change=${(x,ctx) => x.menuChange(<Event & {target: MenuItem}>ctx.event)}>
      <rapid-menu-item @click=${(x) => x.itemOneAction()}>Menu item 1</rapid-menu-item>
      <rapid-menu-item>Menu item 2</rapid-menu-item>
      <rapid-menu-item>Menu item 3</rapid-menu-item>
      <rapid-divider></rapid-divider>
      <rapid-menu-item role="menuitemradio">Menu item 4</rapid-menu-item>
      <rapid-menu-item role="menuitemradio">Menu item 5</rapid-menu-item>
    </rapid-menu>
  `,
})
export class MyElement extends GenesisElement {
  menuChange(e: Event & {target: MenuItem}) {
    // do something with the selected menu item, e.g.
    console.log(e.target.getAttribute('role'))
  }
  itemOneAction() {
    // alternatively, just add event listeners to perform actions on click
  }
}

Genesis

Declaration

<Menu>
  <MenuItem></MenuItem>
  <MenuItem></MenuItem>
</Menu>

Usage

import { Divider, Menu, MenuItem } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  const handleMenuChange = (e: Event & {target: MenuItem}) => {
    // do something with the selected menu item, e.g.
    console.log(e.target.getAttribute('role'))
  }
  const itemOneAction = () => {
    // alternatively, just add event listeners to perform actions on click
  }
  return (
    <Menu onChange={(e) => handleMenuChange(e as Event & {target: MenuItem})}>
      <MenuItem onClick={itemOneAction}>Menu item 1</MenuItem>
      <MenuItem>Menu item 2</MenuItem>
      <MenuItem>Menu item 3</MenuItem>
      <Divider></Divider>
      <MenuItem role="menuitemradio">Menu item 4</MenuItem>
      <MenuItem role="menuitemradio">Menu item 5</MenuItem>
    </Menu>
  )
}

Angular

Declaration

<rapid-menu>
  <rapid-menu-item></rapid-menu-item>
  <rapid-menu-item></rapid-menu-item>
</rapid-menu>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <rapid-menu (change)="handleMenuChange($event)">
      <rapid-menu-item (click)="itemOneAction()">Menu item 1</rapid-menu-item>
      <rapid-menu-item>Menu item 2</rapid-menu-item>
      <rapid-menu-item>Menu item 3</rapid-menu-item>
      <rapid-divider></rapid-divider>
      <rapid-menu-item role="menuitemradio">Menu item 4</rapid-menu-item>
      <rapid-menu-item role="menuitemradio">Menu item 5</rapid-menu-item>
    </rapid-menu>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent {
  handleMenuChange(e: Event) {
    // do something with the selected menu item, e.g.
    const target = e.target as MenuItem;
    console.log(target.getAttribute('role'));
  }
  itemOneAction() {
    // alternatively, just add event listeners to perform actions on click
  }
}

Menu API

The API examples shown here use Genesis component syntax; the closing tag is omitted.

Menu attributes

This component doesn't have any attributes.

Menu properties

This component doesn't have any properties.

Methods

Method	Type	Description
focus	() => void	Focuses the first item in the menu.
collapseExpandedItem	() => void	Collapses any expanded menu items.

Slots

Slot	Description
Default	The default slot where <rapid-menu-item> are placed.

Looped example

You could construct an array of menu items to perform specific actions. Here is an example shown with the Genesis component syntax.

const menuItems = [
  { title: 'console log', action: () => console.log('console log') },
  { title: 'alert', action: () => alert('alert') },
]
@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-menu>
      ${repeat(
        (_) => menuItems,
        html`<rapid-menu-item @click=${x => x.action()}>${x => x.title}</rapid-menu-item>`
      )}
    </rapid-menu>
  `,
})
export class MyElement extends GenesisElement { }

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Menu item API

The API examples are shown with Genesis component syntax; the closing tag is omitted.

Menu item attributes

Attribute	Type	Description	Example
disabled	boolean	Disable the menu item; when disabled, it will not respond to clicks.	<rapid-menu-item disabled>
expanded	boolean	The expanded state of the menu item, especially if it's a submenu.	<rapid-menu-item expanded>
role	"menuitem" | "menuitemcheckbox" | "menuitemradio"	Sets the type of menu item. "menuitem" displays the item as a button. "menuitemcheckbox" displays the item as a checkbox. "menuitemradio" displays the item as a radio button. Default: menuitem.	<rapid-menu-item role="menuitemradio">
checked	boolean	The checked state of the menu item (only if this is acting like a radio button or checkbox).	<rapid-menu-item role="menuitemcheckbox" ?checked=${sync(x => x.checkedItem, 'boolean')}>

Menu item properties

The properties of this component are all controlled via the menu item attributes.

Slots

Slot	Description
Default	The default slot that can be populated by menu items, or other menus to created nested menus.
checked-indicator	The checked indicator.
radio-indicator	The radio indicator.
start	Content that can be provided before the menu item content.
end	Content that can be provided after the menu item content.
expand-collapse-indicator	The expand/collapse indicator.
submenu	Used to nest menus within menu items.

Nested example

You can nest multiple levels of menu items to create sub menus.

<rapid-menu>
    <rapid-menu-item>
        Menu item 1
        <rapid-menu>
            <rapid-menu-item>Menu item 1.1</rapid-menu-item>
            <rapid-menu-item>Menu item 1.2</rapid-menu-item>
        </rapid-menu>
    </rapid-menu-item>
    <rapid-menu-item>
        Menu item 2
        <rapid-menu>
            <rapid-menu-item>Menu item 2.1</rapid-menu-item>
            <rapid-menu-item>Menu item 2.2</rapid-menu-item>
        </rapid-menu>
    </rapid-menu-item>
    <rapid-menu-item>
        Menu item 3
        <rapid-menu>
            <rapid-menu-item>Menu item 3.1</rapid-menu-item>
            <rapid-menu-item>Menu item 3.2</rapid-menu-item>
        </rapid-menu>
    </rapid-menu-item>
</rapid-menu>

Parts

Part	Description
input-container	The element representing the visual checked or radio indicator.
checkbox	The element wrapping the menuitemcheckbox indicator.
radio	The element wrapping the menuitemradio indicator.
content	The element wrapping the menu item content.
expand-collapse-glyph-container	The element wrapping the expand collapse element.
expand-collapse	The expand/collapse element.
submenu-region	The container for the submenu, used for positioning.

Events fired

Event	Type	Description	Example
change	void	Fired when a menu item with a role of menuitemcheckbox, menuitemradio, or menuitem is invoked. The event doesn't contain data, but you can use the event target to get a reference to the emitting menu item. Usually, you will add this onto the containing menu item.	<rapid-menu @change=${(x,ctx) => x.menuChange(<Event & {target: MenuItem}>ctx.event)}>
expanded-change	this	When the expanded state of a menu or submenu changes. Event data is a reference to the emitting menu.	<rapid-menu-item @expanded-change=${(x,ctx) => x.menuExpandedChanged(ctx.event)}>

Events listened to

This component doesn't listen to any events.