{% include '@bolt-components-menu/menu.twig' with {
items: [
{
content: 'Menu Item 1',
},
{
content: 'Menu Item 2',
attributes: {
target: '_blank',
},
},
]
} only %}
| 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
| — |
|
|
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
|
|
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 |
string
| — |
|
|
target
|
A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. |
string
|
_self
|
|
|
type
|
Determines the button tag type for semantic buttons |
string
|
button
|
|
|
cursor
|
Type of cursor shown on hover. |
string
|
pointer
|
|
|
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 |
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
| — |
|
npm install @bolt/components-menu