Bolt Design System

Twig Usage

  {% include '@bolt-components-menu/menu.twig' with {
  items: [
    {
      content: 'Menu Item 1',
    },
    {
      content: 'Menu Item 2',
      attributes: {
        target: '_blank',
      },
    },
  ]
} 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` Optional. Contains a URL that the chip points to. When URL is present, tag changes to `a`, otherwise tag would be `span`. Type: `string` `target` A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. Type: `string` Enum: `_blank` , `_self` , `_parent` , `_top` , `framename` `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` When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked. Type: `string` `on_click_target` Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked. Type: `string` `disabled` Make trigger unusable and un-clickable. Only applies to `button`. Type: `boolean` `icon_before` Append an icon before the text. Icon component is recommended. Type: `object` `icon_after` Append an icon after the text. Icon component is recommended. Type: `object`
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`

Install

  npm install @bolt/components-menu

Dependencies

@bolt/components-trigger

@bolt/core-v3.x

@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.