Dropdown menu

The dropdown menu component enables you to create nested menus with menu items.

Use cases:

• creating a menu for configuring options

Example

The example below shows the component in action. Click on Dropdown Menu to display the menu.

• Menu item 1 includes an icon.
• Menu item 3 displays a submenu with one single item: Menu item 5
• When you click on items 1 and 5, it generates an alert.
• Menu item 4 is disabled.
• Cunningly, there is no Menu item 2 - just to make sure you haven't fallen asleep.

Genesis

Declaration

<rapid-dropdown-menu></rapid-dropdown-menu>

Usage

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

@customElement({
  name: 'my-element',
  template: html`
    <rapid-dropdown-menu :items=${(x) => x.setOfItems}></rapid-dropdown-menu>
  `,
})
export class MyElement extends GenesisElement {
  setOfItems: DropdownMenuItem[] = [
    {
      name: 'Menu item 1',
      callback: () => alert('Menu item 1 clicked'),
      icon: {
        name: 'glasses',
      },
    },
    {
      name: 'Menu item 3',
      callback: () => alert('Menu item 3 clicked'),
      submenu: [
        {
          name: 'Menu item 5',
          callback: () => alert('Menu item 5 clicked'),
          color: 'red',
          icon: {
            name: 'address-card',
          },
        },
      ]
    },
    {
      name: 'Menu item 4',
      callback: () => logger.debug('Menu item 4 clicked'),
      isDisabled: () => true,
    },
  ];
}

React

Declaration

<rapid-dropdown-menu></rapid-dropdown-menu>

Usage

export function MyComponent() {
  const setOfItems = [
    {
      name: 'Menu item 1',
      callback: () => alert('Menu item 1 clicked'),
      icon: {
        name: 'glasses',
      },
    },
    {
      name: 'Menu item 3',
      callback: () => alert('Menu item 3 clicked'),
      submenu: [
        {
          name: 'Menu item 5',
          callback: () => alert('Menu item 5 clicked'),
          color: 'red',
          icon: {
            name: 'address-card',
          },
        },
      ]
    },
    {
      name: 'Menu item 4',
      callback: () => console.log('Menu item 4 clicked'),
      isDisabled: () => true,
    },
  ];

  return (
    <CodeSection>
      <rapid-dropdown-menu items={setOfItems}></rapid-dropdown-menu>
    </CodeSection>
  )
}

Angular

Declaration

<rapid-dropdown-menu></rapid-dropdown-menu>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `
    <div class="code-section">
      <rapid-dropdown-menu [items]="setOfItems"></rapid-dropdown-menu>
    </div>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class MyComponent {
  setOfItems = [
    {
      name: 'Menu item 1',
      callback: () => alert('Menu item 1 clicked'),
      icon: {
        name: 'glasses',
      },
    },
    {
      name: 'Menu item 3',
      callback: () => alert('Menu item 3 clicked'),
      submenu: [
        {
          name: 'Menu item 5',
          callback: () => alert('Menu item 5 clicked'),
          color: 'red',
          icon: {
            name: 'address-card',
          },
        },
      ]
    },
    {
      name: 'Menu item 4',
      callback: () => console.debug('Menu item 4 clicked'),
      isDisabled: () => true,
    },
  ];
}

API

Configuration Type

The configuration of the dropdown menu is described by this typescript type.

export type DropdownMenuItem = {
  name: string;
  icon?: {
    variant?: IconStyle;
    name: string;
    size?: FaSize;
  };
  color?: string;
  submenu?: DropdownMenuItem[];
  callback?: (params?: any) => void | any;
  isDisabled?: (params?: any) => boolean;
};

Attributes

Attribute	Type	Description	Example
auto-close	boolean	Controls whether the dropdown closes automatically (Default: true)	<rapid-dropdown-menu auto-close>
disable-button	boolean	Disables the dropdown button (Default: false)	<rapid-dropdown-menu disable-button>
name	string	The name of the dropdown menu (Default: 'Dropdown Menu')	<rapid-dropdown-menu name="Dropdown Menu">
open	boolean	Controls if the dropdown is open (Default: false)	<rapid-dropdown-menu open>
buttonAppearance	string	Sets the appearance style of the button (Default: none)	<rapid-dropdown-menu buttonAppearance="primary">

Properties

Property	Type	Description	Example
items	DropdownMenuItem[]	Configure the items to be in the dropdown menu.	<rapid-dropdown-menu :items=${x => x.menuItems}>

Slots

Slot	Description
Default	The text that appears on the root dropdown menu button.

Parts

Part	Description
actions-container	The main container element that wraps up the button and the dropdown menu.
actions-opener	The button that opens the dropdown.
actions-menu	The dropdown menu.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.