CMS Developers

{%- macro render_link_item(link,depth)-%}
  {%- if link != [] && link.label -%}
    <li class="hs-menu-item hs-menu-depth-{{depth}} {{'hs-item-has-children' if link.children}}" aria-role="none" {{'aria-haspopup="true"' if link.children}}>
      <a href="{{link.url if link.url else '#'}}" aria-role="menuitem">{{link.label}}</a>
      {%- if link.children -%}
      <ul class="hs-menu-children-wrapper" aria-role="menu">
        {% set depth = depth + 1%}
        {%- for sublink in link.children -%}
        {{render_link_item(sublink,depth)}}
        {%- endfor -%}
      </ul>
      {%- endif -%}
    </li>
  {%- endif -%}
{%- endmacro -%}
  <nav class="sc-site-header__menu sc-site-header__menu--{{ module.menu_field }} hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" aria-label="{{menu_name}} menu">
      
      {% set menu = menu(module.menu_field , "site_root").children %}
      <ul aria-role="menubar">
       {% for link in menu %}
        {{render_link_item(link,1)}}
       {% endfor %}
      </ul>
  </nav>

          
        

          
            /* This module gets most of it's styles from the HubSpot boilerplate css to start, add your own styles if necessary. */

          
        

          
            // No JS needed