menu docs

Menu

A vertical list of interactive list items. This component is usually used inside a popover container to provide additional actions.
Twig Usage 
{% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item One',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Two',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_three %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Three',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set list_items %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  content: list_items,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Menu (menu.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

 object —
  • —
content

Menu items. Accepts @bolt-elements-menu/menu-item.twig.

 string , array , object —
  • —
title

The menu element can have a title if needed.

 string —
  • —
spacing

Controls the inset spacing of each menu item.

 string small
  • xsmall, small, medium
Menu li (menu-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

 object —
  • —
content

Menu item. It's recommended to use a basic text link here @bolt-elements-text-link/text-link.twig

 any —
  • —
Install Install 
npm install @bolt/elements-menu
Dependencies @bolt/core

menu

Basic Menu Menu is a list of actions for the user to perform.
Important Notes: Menu is usually used inside of a Popover. Menu items must be valid interactive elements - links or buttons. It's recomended to use only Text Link Element for menu items. The Text Link Element can be a link when using a href prop inside attributes but can be changed to text link as a semantic button if needed, by using the type prop.
Demo
Light Theme
    • Dark Theme
    • Twig
    {% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item One',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Two',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_three %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Three',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set list_items %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  content: list_items,
} only %}
    HTML
    <menu class="e-bolt-menu">
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      Menu Item One
    </button>
  </li>
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      Menu Item Two
    </button>
  </li>
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      Menu Item Three
    </button>
  </li>
</menu>

    menu title variations

    Menu title Create a title for the menu by using the title prop.
    Important Notes: When choosing a title for the menu and using plain HTML, the structure is slightly different. The menu tag must be wrapped in a div with e-bolt-menu class.
    Demo

    Choose one of these

    •
    Twig
    {% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item One',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Two',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_three %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Three',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set list_items %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  title: 'Choose one of these',
  content: list_items,
} only %}
    HTML
    <div class="e-bolt-menu">
  <h2 class="e-bolt-menu__title">This is the menu title</h2>
  <menu>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item One
      </button>
    </li>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item Two
      </button>
    </li>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item Three
      </button>
    </li>
  </menu>
</div>

    menu spacing variations

    Menu spacing Control the spacing around each menu item by using the spacing prop. Reference spacing options in the schema. Demo

    This is a menu with xsmall spacing

    •

    This is a menu with small spacing

    •

    This is a menu with medium spacing

    •
    Twig
    {% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item One',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Two',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_three %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Three',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set list_items %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  spacing: 'medium',
  content: list_items,
} only %}
    HTML
    <div class="e-bolt-menu e-bolt-menu--spacing-medium">
  <h2 class="e-bolt-menu__title">This is the menu title</h2>
  <menu>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item One
      </button>
    </li>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item Two
      </button>
    </li>
    <li class="e-bolt-menu__item">
      <button type="button" class="e-bolt-text-link">
        Menu Item Three
      </button>
    </li>
  </menu>
</div>

    menu use case icons

    Icon before and after menu item text Icons can be used in tandem with a Text Link, see how to use icon with the Text Link Element. An icon can be placed before and/or after the text. The Icon Element is recommended for appending icons. However, an <img> element is also acceptable.
    Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size prop for the icon element is not supported in this scenario.
    Demo
    • Twig
    {% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_X %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'x',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
  } only %}
{% endset %}

{% set list_items %}
  {% set menu_item_one %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item One',
      icon_before: icon_facebook,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set menu_item_two %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item Two',
      icon_before: icon_X,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set menu_item_three %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item Three',
      icon_before: icon_linkedin,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  content: list_items,
} only %}
    HTML
    <menu class="e-bolt-menu">
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      <span class="e-bolt-text-link__icon-before" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
      This menu item contains a button with icon before
    </button>
  </li>
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      This menu item contains a button with icon after
      <span class="e-bolt-text-link__icon-after" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
    </button>
  </li>
</menu>

    menu use case popover

    Popover menu Create a popover menu by combining the Popover and Menu components. Demo

    Choose one of these

    •
    Twig
    {% set popover_trigger %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Popover menu',
    size: 'xsmall',
    attributes: {
      type: 'button'
    }
  } only %}
{% endset %}
{% set popover_content %}
  {% set list_items %}
    {% set menu_item_one %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item One',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_two %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Two',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_three %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Three',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% include '@bolt-elements-menu/menu-item.twig' with {
      content: menu_item_one,
    } only %}
    {% include '@bolt-elements-menu/menu-item.twig' with {
      content: menu_item_two,
    } only %}
    {% include '@bolt-elements-menu/menu-item.twig' with {
      content: menu_item_three,
    } only %}
  {% endset %}

  {% include '@bolt-elements-menu/menu.twig' with {
    title: 'Choose one of these',
    content: list_items,
  } only %}
{% endset %}

{% include '@bolt-components-popover/popover.twig' with {
  trigger: popover_trigger,
  content: popover_content,
  spacing: 'none',
} only %}
    HTML
    Not available in plain HTML. Please use Twig.