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>