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: 2.30.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.
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 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
Close popover
Twig
{% set popover_trigger %} {% include '@bolt-components-button/button.twig' with { text: 'Popover menu', size: 'xsmall', } 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"> <bolt-button size="small"> Popover menu </bolt-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>