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: 5.1.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',
        rel: 'noopener',
      },
    },
  ]
} 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
rel

Set to noopener, if a link is external.

 string —
  • —
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-elements-icon/icon.twig' with {
    name: 'facebook-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-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>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    Share via Facebook
  </bolt-menu-item>
  <bolt-menu-item>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    Share via Twitter
  </bolt-menu-item>
  <bolt-menu-item>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    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>