Menu

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

Published Last updated: 4.6.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-menu/menu.twig' with {
  items: [
    {
      content: 'Menu Item 1',
    },
    {
      content: 'Menu Item 2',
      attributes: {
        target: '_blank',
      },
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Menu
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
  • See below
content

Custom content for menu items.

string , array , object
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: items
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the trigger (Twig only).

string , array , object
url

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.

string
target

A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.

string _self
  • _blank, _self, _parent, _top, framename
type

Determines the button tag type for semantic buttons

string button
  • button, submit, reset
cursor

Type of cursor shown on hover.

string pointer
  • auto, pointer, zoom-in, zoom-out
on_click

When used with on_click_target, an event to fire on the targeted elements when this element is clicked. When used without on_click_target, arbitrary javascript to execute when this element is clicked.

string
on_click_target

Requires on_click. A CSS selector for elements that the on_click event will fire on when this element is clicked.

string
onClick
(deprecated)

Use on_click instead.

onClickTarget
(deprecated)

Use on_click_target instead.

disabled

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

boolean false
icon_before

Append an icon before the text. Icon component is recommended.

object
icon_after

Append an icon after the text. Icon component is recommended.

object
Install Install
npm install @bolt/components-menu
Dependencies @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue wc-context