Menu item as a button or a link A menu item can be either a button or a link.
Important Notes: The Text Link Element is a link when using a href prop inside attributes but can be changed to a semantic button if needed, by using type prop inside attributes. Rememeber to add additional attributes target and rel to the attributes if the link is external.
Demo
  • This menu item contains a link
    • Twig
    {% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'This menu item contains a button',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'This menu item contains a link',
    attributes: {
      href: 'www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  } 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 %}
{% 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">
      This menu item contains a button
    </button>
  </li>
  <li class="e-bolt-menu__item">
    <a href="www.google.com" target="_blank" rel="noopener" class="e-bolt-text-link">
      This menu item contains a link
    </a>
  </li>
</menu>