#macro(menuItem $item)
  <li class="hiq-sub-menu__item #if($item.active) hiq-sub-menu__item-active #end">
    <div class="hiq-sub-menu__link-wrapper level-${item.level}">
      <a href="$item.uri" class="hiq-sub-menu__link ${item.childActive}" id="link-${item.id}" #if($item.active) aria-current="page" #end>
        <div class="hiq-sub-menu__link-container">
          <span>$item.name</span>
        </div>
      </a>

        #if($item.children.length > 0)
          <button
            class="hiq-sub-menu__expander level-${item.level}"
            data-toggle="sub-${item.id}"
            data-sibling="link-${item.id}"
             #if($item.childActive)aria-label="Dölj undersidor som finns under ${item.name}"#else aria-label="Visa undersidor som finns under ${item.name}"#end
            #if($item.childActive)aria-expanded="true"#end>
            <span class="hiq-sub-menu__expander-icon" aria-hidden="true"></span>
          </button>
        #end
      </div>
      #if($item.children.length > 0)
        <ul class="hiq-sub-menu hiq-sub-menu__child hiq-sub-menu--level-${item.level}" id="sub-${item.id}" #if($item.childActive) data-open="true" #end aria-label="Undersidor under $item.name">
          #foreach($child in $item.children)
              #menuItem($child)
          #end
        </ul>
      #end
  </li>
#end

#if($rootPage)
  <div class="hiq-sub-menu__wrapper" role="navigation" aria-label="Undermeny">
      <a href="$rootUri" class="hiq-sub-menu__header #if ($parentPage) active #end">
        <span>$tree.name</span>
      </a>
      <ul class="hiq-sub-menu hiq-menu--level-0" data-open="true" aria-label="Undersidor under $rootPage">
        #foreach($leaf in $tree.children)
          #menuItem($leaf)
        #end
      </ul>
  </div>
#end