DE-PACK Component Library

Menu: Horizontal 

<nav class="menu menu--horizontal">
    <div class="menu__entry px-2 py-2">
        <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 1</a>
    </div>
    <div class="menu__entry--parent px-2 py-2">
        <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 2</a>
        <div class="menu menu__submenu">
            <div class="menu__entry px-2 py-2">
                <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 2 - 1</a>
            </div>
            <div class="menu__entry px-2 py-2">
                <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 2 - 2</a>
            </div>
            <div class="menu__entry px-2 py-2">
                <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 2 - 3</a>
            </div>
        </div>
    </div>
    <div class="menu__entry px-2 py-2">
        <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 3</a>
    </div>
    <div class="menu__entry--parent px-2 py-2">
        <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 4</a>
        <div class="menu menu__submenu">
            <div class="menu__entry px-2 py-2">
                <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 4 - 1</a>
            </div>
            <div class="menu__entry px-2 py-2">
                <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 4 - 2</a>
            </div>
        </div>
    </div>
    <div class="menu__entry px-2 py-2">
        <a class="menu__link whitespace-nowrap text-ellipsis overflow-hidden" href="#">Eintrag 5</a>
    </div>
</nav>
 
{%
  set space = 'px-2 py-2'
%}
{%
  set behaviour = 'whitespace-nowrap text-ellipsis overflow-hidden'
%}

<nav class="menu menu--horizontal">
{% for m in menu %}
  {% if m.children %}
    <div class="menu__entry--parent {{ space }}">
      <a class="menu__link {{ behaviour }}" href="#">{{ m.label }}</a>
      <div class="menu menu__submenu">
      {% for child in m.children %}
          <div class="menu__entry {{ space }}">
            <a class="menu__link {{ behaviour }}" href="#">{{ child.label }}</a>
          </div>
      {% endfor %}
        </div>
      </div>
    {% else %}
      <div class="menu__entry {{ space }}">
        <a class="menu__link {{ behaviour }}" href="#">{{ m.label }}</a>
      </div>
    {% endif %}
{% endfor %}
</nav>
 
{
  "menu": [
    {
      "label": "Eintrag 1",
      "children": ""
    },
    {
      "label": "Eintrag 2",
      "children": [
        {
          "label": "Eintrag 2 - 1",
          "children": ""
        },
        {
          "label": "Eintrag 2 - 2",
          "children": ""
        },
        {
          "label": "Eintrag 2 - 3",
          "children": ""
        }
      ]
    },
    {
      "label": "Eintrag 3",
      "children": ""
    },
    {
      "label": "Eintrag 4",
      "children": [
        {
          "label": "Eintrag 4 - 1",
          "children": ""
        },
        {
          "label": "Eintrag 4 - 2",
          "children": ""
        }
      ]
    },
    {
      "label": "Eintrag 5",
      "children": ""
    }
  ]
}

No notes defined.