Freie Grundschule Pfefferwerk - Frontend Design

Menu Sub 

<nav class="c-menu-sub o-space-b:default" aria-label="Sub-Navigation">

    <h3 class="c-menu-sub__headline u-typo:l">Menu Sub</h3>

    <ul class="c-menu-sub__list" role="menu">

        <li class="c-menu-sub__item c-menu-sub__list--lvl1 is-active" role="menuitem">
            <a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Integer vitae libero ac risus egestas</a>

            <ul class="c-menu-sub__list c-menu-sub__list--lvl2" role="menu">
                <li class="c-menu-sub__item c-menu-sub__item--lvl2 is-current" role="menuitem">
                    <span class="c-menu-sub__link c-menu-sub__link--lvl2" aria-current="true">Aliquam tincidunt</span>
                </li>
                <li class="c-menu-sub__item c-menu-sub__item--lvl2" role="menuitem">
                    <a href="#" class="c-menu-sub__link c-menu-sub__link--lvl2">Integer vitae libero ac risus egestas</a>
                </li>
            </ul>

        </li>

        <li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
            <a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Integer vitae libero ac risus egestas</a>

        </li>

        <li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
            <a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Integer vitae libero ac risus egestas</a>

        </li>

        <li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
            <a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Integer vitae libero ac risus egestas</a>

        </li>

    </ul>

</nav>
 
<nav class="c-menu-sub {{spaceAfter}}" aria-label="Sub-Navigation">

    {{#if headline}}
        <h3 class="c-menu-sub__headline u-typo:l">{{headline}}</h3>
    {{/if}}

    <ul class="c-menu-sub__list" role="menu">

        {{#each menuSubItems}}

            <li class="c-menu-sub__item c-menu-sub__list--lvl1 {{#active}}is-active{{/active}}" role="menuitem">
                <a href="{{url}}" class="c-menu-sub__link c-menu-sub__link--lvl1">{{title}}</a>

                {{#if @first}}
                    <ul class="c-menu-sub__list c-menu-sub__list--lvl2" role="menu">
                        <li class="c-menu-sub__item c-menu-sub__item--lvl2 {{#current}}is-current{{/current}}" role="menuitem">
                            <span class="c-menu-sub__link c-menu-sub__link--lvl2" {{#current}}aria-current="true"{{/current}}>{{titleCurrent}}</span>
                        </li>
                        <li class="c-menu-sub__item c-menu-sub__item--lvl2" role="menuitem">
                            <a href="{{url}}" class="c-menu-sub__link c-menu-sub__link--lvl2">{{title}}</a>
                        </li>
                    </ul>
                {{/if}}

            </li>

        {{/each}}

    </ul>

</nav>
 
{
  "spaceAfter": "o-space-b:default",
  "headline": "Menu Sub",
  "menuSubItems": [
    {
      "active": true,
      "current": true,
      "title": "Integer vitae libero ac risus egestas",
      "titleCurrent": "Aliquam tincidunt",
      "url": "#"
    },
    {
      "title": "Integer vitae libero ac risus egestas",
      "url": "#"
    },
    {
      "title": "Integer vitae libero ac risus egestas",
      "url": "#"
    },
    {
      "title": "Integer vitae libero ac risus egestas",
      "url": "#"
    }
  ]
}

There are no notes for this item.