SIA Web Design Library

Site Navigation: Default

No notes defined.

<div class='c-site-navigation'>
    <nav id="site-navigation" class="c-site-navigation__nav js-has-toggler" role="navigation">
        <button class="js-toggle c-button--icon c-icon c-icon-menu c-site-navigation__js-toggle" aria-expanded="false" aria-controls="site-navigation-menu"><svg height='100px' width='100px' xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
                <g transform="translate(0,-952.36218)">
                    <path d="m 14,970.36216 c -2.7614,0 -5.0000001,2.2385 -5.0000001,5 0,2.76149 2.2386001,5 5.0000001,5 l 72,0 c 2.7614,0 5,-2.23851 5,-5 0,-2.7615 -2.2386,-5 -5,-5 z m 0,27 c -2.7614,0 -5.0000001,2.23845 -5.0000001,4.99994 0,2.7615 2.2386001,5 5.0000001,5 l 72,0 c 2.7614,0 5,-2.2385 5,-5 0,-2.76149 -2.2386,-4.99994 -5,-4.99994 z m 0,27.00004 c -2.7614,0 -5.0000001,2.2385 -5.0000001,5 0,2.7615 2.2386001,5 5.0000001,5 l 72,0 c 2.7614,0 5,-2.2385 5,-5 0,-2.7615 -2.2386,-5 -5,-5 z"></path>
                </g>
            </svg><span class='sr-only'> Menu</button>
        <ul id="site-navigation-menu" class="c-menu">
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>Home</a> </li>
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>Alumni</a> </li>
            <li class="
            c-menu__item 
             
                c-menu__item--current 
             
             
                c-menu__item--highlight
             
             
                c-menu__item--parent 
            "><a class="
                c-menu__item__link 
                 
                    c-menu__item__link--current 
                                " href=''>Program</a>
                <ul class='c-menu__item__sub-menu'>
                    <li class='c-menu__item 
                            c-menu__item__sub-menu__item 
                                                        '><a class="
                                c-menu__item__link 
                                c-menu__item__sub-menu__item__link 
                                                                " href=''>Discovery</a></li>
                    <li class='c-menu__item 
                            c-menu__item__sub-menu__item 
                                                        '><a class="
                                c-menu__item__link 
                                c-menu__item__sub-menu__item__link 
                                                                " href=''>Incubation</a></li>
                    <li class='c-menu__item 
                            c-menu__item__sub-menu__item 
                                                        '><a class="
                                c-menu__item__link 
                                c-menu__item__sub-menu__item__link 
                                                                " href=''>Application</a></li>
                    <li class='c-menu__item 
                            c-menu__item__sub-menu__item 
                                                        '><a class="
                                c-menu__item__link 
                                c-menu__item__sub-menu__item__link 
                                                                " href=''>Award</a></li>
                </ul>
            </li>
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>Articles</a> </li>
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>Partners</a> </li>
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>About SIA</a> </li>
        </ul>
    </nav>
</div>
 
<div class='{{ get_component_class( 'site-navigation', display ) }}'>
    <nav id="site-navigation" class="c-site-navigation__nav js-has-toggler" role="navigation">
        <button class="js-toggle c-button--icon c-icon c-icon-menu c-site-navigation__js-toggle" aria-expanded="false" aria-controls="site-navigation-menu">{{ svg( 'noun_menu_933310.svg' )|raw }}<span class='sr-only'> {{ 'Menu'|t }}</button>
        {% include '@unit/menu/menu.twig' with menu %}
    </nav>
</div>
 
{
  "menu": {
    "id": "site-navigation-menu",
    "items": [
      {
        "title": "Home"
      },
      {
        "title": "Alumni"
      },
      {
        "title": "Program",
        "in_active_trail": true,
        "active": true,
        "highlight": true,
        "submenu": [
          {
            "title": "Discovery"
          },
          {
            "title": "Incubation"
          },
          {
            "title": "Application"
          },
          {
            "title": "Award"
          }
        ]
      },
      {
        "title": "Articles"
      },
      {
        "title": "Partners"
      },
      {
        "title": "About SIA"
      }
    ]
  }
}