twigfiddle.com - Fiddle lpnzoe v1 - Created on May 14, 2021 22:21

File

<!-- components/site-header/site-header.twig -->
<header class="site-header">
  <div class="site-header-inner">

    {# Main Nav #}
    <nav class="site-header-nav" aria-label="{{ 'Main Site Navigation' }}">

      <ul class="site-header-main-nav">
        <li class="site-header-logo">
          <a href="/">
            <img src="/images/abelton_logo.svg" alt="Abelton Logo"/>
          </a>
        </li>
         {% for item in site_header.main_nav %}
         {% if item.current and item.children %}
           {%  set pageItem = item.children %}
         {% endif %}
          <li>
            <a href="{{ item.url }}"  data-active="{{ item.current ? 'true' : 'false' }}" data-children="{{ item.children ? 'true' : 'false' }}">{{ item.text }}</a>
          </li>
          {% endfor %}
      </ul>
      <hr />
      {# Page level nav #}

        {% if pageItem %}
          <ul>
            {% for child in pageItem %}
              <li>
                <a href="{{ child.url }}" target="{{ item.target }}" data-active="{{ child.current ? 'true' : 'false' }}">{{ child.text }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>

    </nav>
  </div>
</header>

Format

{
  "site_header": {
    "more_nav": [
      {
        "text": "More test 2",
        "expanded" : false,
        "submenus" : [
          {
            "title" : "More on Ableton.com"
          },
          {
            "title" : "More from Ableton"
          }
        ]
      }
    ],
    "utility_nav": [
      {
        "text": "Try Live for free",
        "url": "#"
      },
      {
        "text": "Log in or register",
        "url": "#"
      }
    ],
    "main_nav": [
      {
        "text": "Live1",
        "url": "#",
        "current": true,
        "children": [
          {
            "text": "Live 11",
            "url": "#",
            "current": false
          },
          {
            "text": "All new features",
            "url": "#"
          },
          {
            "text": "What is Live",
            "url": "#"
          },
          {
            "text": "Max for Live",
            "url": "#"
          },
          {
            "text": "Learn Live",
            "url": "#"
          },
          {
            "text": "Integrated hardware",
            "url": "#"
          },
          {
            "text": "Compare editions",
            "url": "#"
          },
          {
            "text": "Buy now",
            "url": "#"
          }
        ]
      },
      {
        "text": "Push",
        "url": "#",
        "children": [
          {
            "text": "Overview",
            "url": "#"
          },
          {
            "text": "What's new",
            "url": "#"
          },
          {
            "text": "Making beats",
            "url": "#"
          },
          {
            "text": "Playing notes and chords",
            "url": "#"
          },
          {
            "text": "Sampling",
            "url": "#"
          },
          {
            "text": "Design",
            "url": "#"
          },
          {
            "text": "Tech specs",
            "url": "#"
          },
          {
            "text": "Learn Push",
            "url": "#"
          },
          {
            "text": "Buy now",
            "url": "#"
          }
        ]
      },
      {
        "text": "Link",
        "url": "#",
        "children": [
          {
            "text": "What is Link?",
            "url": "#"
          },
          {
            "text": "Link-enabled products",
            "url": "#"
          }
        ]
      },
      {
        "text": "Shop",
        "url": "#",
        "children": [
          {
            "text": "Overview",
            "url": "#"
          },
          {
            "text": "Live",
            "url": "#"
          },
          {
            "text": "Educational offers",
            "url": "#"
          },
          {
            "text": "Max for Live",
            "url": "#"
          },
          {
            "text": "Making Music",
            "url": "#"
          },
          {
            "text": "Merchandise",
            "url": "#"
          }
        ]
      },
      {
        "text": "Packs",
        "url": "#"
      },
      {
        "text": "Help",
        "url": "#"
      }
    ]
  }
}