2.23.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
@bolt/components-trigger @bolt/core @bolt/lazy-queue wc-context

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
Overview Usage Schema Edit this page

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