DE-PACK Component Library

Menu Raw Tailwind Classes 

<nav class="w-fit text-base font-bold">
    <ul class="menu parents flex flex-row gap-4 w-fit">
        <li class="parent px-2 py-4">
            <a class="parent whitespace-nowrap" href="#">Eintrag 1</a>
        </li>
        <li class="parent has-children px-2 py-4">
            <a class="parent has-children whitespace-nowrap" href="#">Eintrag 2</a>
            <ul class="children flex flex-col gap-4">
                <li class="child bg-mango px-2 py-4">
                    <a class="child whitespace-nowrap" href="#">Eintrag 2 - 1</a>
                </li>
                <li class="child bg-mango px-2 py-4">
                    <a class="child whitespace-nowrap" href="#">Eintrag 2 - 2</a>
                </li>
                <li class="child bg-mango px-2 py-4">
                    <a class="child whitespace-nowrap" href="#">Eintrag 2 - 3</a>
                </li>
            </ul>
        </li>
        <li class="parent px-2 py-4">
            <a class="parent whitespace-nowrap" href="#">Eintrag 3</a>
        </li>
        <li class="parent has-children px-2 py-4">
            <a class="parent has-children whitespace-nowrap" href="#">Eintrag 4</a>
            <ul class="children flex flex-col gap-4">
                <li class="child bg-mango px-2 py-4">
                    <a class="child whitespace-nowrap" href="#">Eintrag 4 - 1</a>
                </li>
                <li class="child bg-mango px-2 py-4">
                    <a class="child whitespace-nowrap" href="#">Eintrag 4 - 2</a>
                </li>
            </ul>
        </li>
        <li class="parent px-2 py-4">
            <a class="parent whitespace-nowrap" href="#">Eintrag 5</a>
        </li>
    </ul>
</nav>
 
{%
  set menuentry_spacing = 'px-2 py-4'
%}
{%
  set whitespace_behaviour = 'whitespace-nowrap'
%}

<nav class="w-fit text-base font-bold">
  <ul class="menu parents flex flex-row gap-4 w-fit">
  {% for m in menu %}
    {% if m.children %}
      <li class="parent has-children {{ menuentry_spacing }}">
        <a class="parent has-children {{ whitespace_behaviour }}" href="#">{{ m.label }}</a>
        <ul class="children flex flex-col gap-4">
          {% for child in m.children %}
          <li class="child bg-mango {{ menuentry_spacing }}">
            <a class="child {{ whitespace_behaviour }}" href="#">{{ child.label }}</a>
          </li>
          {% endfor %}
        </ul>
    {% else %}
      <li class="parent {{ menuentry_spacing }}">
        <a class="parent {{ whitespace_behaviour }}" href="#">{{ m.label }}</a>
    {% endif %}
  </li>
  {% endfor %}
  </ul>
</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.