2.15.2

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