Bolt Design System

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

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

  npm install @bolt/components-menu

Dependencies

@bolt/components-trigger

@bolt/core

@bolt/lazy-queue

wc-context

Menu

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