Cacher is the code snippet organizer for pro developers

{{ attach_library('theme_name/menu') }}

<ul class="menu list-unstyled{% if modifier %} {{ modifier }}{% endif %}
  {{- attributes.class ? attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  {{ title_prefix }}
  {{ title_suffix }}

  {% for item in items %}
    <li class="menu__item">
      <a href="{{ item.url }}" class="menu__link {% if item.options.attributes.class is not empty %} {{ item.options.attributes.class|join(' ') }} {% endif %}"{% if item.options.attributes.target is not empty %} target="{{ item.options.attributes.target }}"{% endif %}>{% if item.title %}{{ item.title }}{% else %}{{ item.text }}{% endif %}</a>
    </li>
  {% endfor %}
</ul>

items:
  -
    title: "This is a link"
    url: "#"
  -
    title: "This is another link"
    url: "#"
  -
    title: "This is one more link"
    url: "#"

    modifier:

{{ attach_library('theme_name/utility-bar') }}

{% if links or search %}
  <div class="utility-bar">
    <div class="utility-bar__inner">
      {% if links %}
        {%
          include '@patterns/menu/menu.twig' with
            {
              items: links,
              modifier: 'utility-bar__menu',
            } only
        %}
      {% endif %}
    </div>
  </div>
{% endif %}

links:
  -
    title: "Contact Us"
    url: "#"
  -
    title: "My Account"
    url: "#"
    modifier: "btn btn-primary"

@import '../../global/utils/init';

.utility-bar {
  padding: 1rem;

  .menu {
    margin: 0;
    display: inline-block;

    li {
      display: inline-block;
      margin: 0 1rem;
    }
  }
}

.utility-bar__inner {
  @include layout-content;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}