menu docs

Menu

A vertical list of menu items. This component is usually used inside a popover container to provide additional actions.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-menu/menu.twig" with {
  items: [
    {
      content: "Menu Item 1",
      attributes: {
        "attribute-name": "function",
      },
    },
    {
      content: "Menu Item 2",
      attributes: {
        "attribute-name": "function",
      },
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.

 object —
  • —
items

Generates an array of items, each item is a <bolt-trigger>. While the content prop for each item can accept anything custom content, plain text is the recommended format.

 array —
  • [items]:
    • Type:object

      A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.

    • Properties:
      • attributes

        A Drupal-style attributes object with extra attributes to append to this component.

        • Type: object
      • content

        Main content of the trigger (Twig only).

        • Type: string, array, object
      • url

        Contains a URL that the link points to. This may also be passed as part of attributes.

        • Type: string
      • target

        Specifies where to display the linked URL. This may also be passed as part of attributes.

        • Type: string
      • type

        Determines the button tag type for semantic buttons

        • Type: string
        • Enum: button , submit , reset
      • cursor

        Type of cursor shown on hover.

        • Type: string
        • Enum: auto , pointer , zoom-in , zoom-out
      • on_click

        The name of a method on the on_click_target.

        • Type: string
      • on_click_target

        className (e.g. "js-click-me") used in querySelector to reference a web component on the page. onClick, the on_click method name will be called on this element.

        • Type: string
      • disabled

        Make trigger unusable and un-clickable. Only applies to button.

        • Type: boolean
title

Controls the inset spacing of each menu item.

 string —
  • —
spacing

Controls the inset spacing of each menu item.

 string small
  • xsmall , small , medium
Install Install 
  npm install @bolt/components-menu
Dependencies @bolt/components-trigger @bolt/core @bolt/lazy-queue wc-context

menu

Note: this component is usually used inside of a popover. View Popover

menu title variations

Menu title Create a title for the menu by using the title prop.

menu spacing variations

Menu with xsmall spacing Menu with small spacing Menu with medium spacing

menu use case popover

Popover menu Create a popover menu by combining the Popover and Menu components.
Close popover

menu use case theming

Menu inside a xdark theme
Menu inside a dark theme
Menu inside a light theme
Menu inside a xlight theme

menu with web component

Web Component Usage Bolt Menu is a web component, you can simply use <bolt-menu> in the markup to make it render.
Menu item 1 Menu item 2 Menu item 3
<bolt-menu> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>
Prop Usage Configure the menu with the properties specified in the schema.
Menu Options Menu item 1 is a button Menu item 2 is a link
<bolt-menu spacing="medium"> <span slot="title">Menu Options</span> <bolt-menu-item> Menu item 1 is a button </bolt-menu-item> <bolt-menu-item url="https://pega.com"> Menu item 2 is a link </bolt-menu-item> </bolt-menu>