menu docs

2.21.0

Menu

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

Published

History
View changes
Install
yarn add @bolt/components-menu
Source code
View on Github
Dependencies

Overview

Menu is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-menu

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

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. Choose one of these

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 Choose one of these

menu use case theming

Menu inside a xdark theme
Choose one of these
Menu inside a dark theme
Choose one of these
Menu inside a light theme
Choose one of these
Menu inside a xlight theme
Choose one of these

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>
Debug Panel