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>