menu docs

Menu

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

Published Last updated: 4.0.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

menu

Basic menu Menu is a list of actions for the user to perform. Important Notes: Menu is usually used inside of a popover. View Popover Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<bolt-menu> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>

menu title variations

Menu title Create a title for the menu by using the title prop. Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<bolt-menu> <span slot="title">Choose one of these</span> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>

menu spacing variations

Menu spacing Control the spacing around each menu item by using the spacing prop. Reference spacing options in the schema. Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { spacing: 'medium', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<bolt-menu spacing="medium"> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>

menu use case icons

Icon before and after menu item text Use the icon_before and icon_after props to append icons before or after the menu item text. Demo
Twig
{% set icon_facebook %} {% include '@bolt-components-icon/icon.twig' with { name: 'facebook-solid', size: 'small', } only %} {% endset %} {% set icon_twitter %} {% include '@bolt-components-icon/icon.twig' with { name: 'twitter-solid', size: 'small', } only %} {% endset %} {% set icon_linkedin %} {% include '@bolt-components-icon/icon.twig' with { name: 'linkedin-solid', size: 'small', } only %} {% endset %} {% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Share via Facebook', icon_before: icon_facebook, }, { content: 'Share via Twitter', icon_before: icon_twitter, }, { content: 'Share via LinkedIn', icon_before: icon_linkedin, }, ] } only %}
HTML
<bolt-menu> <bolt-menu-item> <bolt-icon name="facebook-solid" size="small" slot="icon-before"></bolt-icon> Share via Facebook </bolt-menu-item> <bolt-menu-item> <bolt-icon name="twitter-solid" size="small" slot="icon-before"></bolt-icon> Share via Twitter </bolt-menu-item> <bolt-menu-item> <bolt-icon name="linkedin-solid" size="small" slot="icon-before"></bolt-icon> Share via LinkedIn </bolt-menu-item> </bolt-menu>

menu use case popover

Popover menu Create a popover menu by combining the Popover and Menu components. Demo
Twig
{% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'Popover menu', size: 'xsmall', attributes: { type: 'button' } } only %} {% endset %} {% set popover_content %} {% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', } only %}
HTML
<bolt-popover spacing="none"> <button type="button" class="e-bolt-button e-bolt-button--small"> Popover menu </button> <div slot="content"> <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div> </bolt-popover>

menu use case theming

Theme compatibility Menu can be used in various themes. Demo
Twig
<div class="t-bolt-dark"> // Put the component inside a themed container {% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %} </div>
HTML
<div class="t-bolt-dark"> // Put the component inside a themed container <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div>