Freie Grundschule Pfefferwerk - Frontend Design

Menu Skip 

<!--
    @int:
    place directly after <body>, has to be the first focusable element
    update translation for aria-label and link title if we have additional languages
-->
<nav class="c-menu-skip" aria-label="Sprunglink-Navigation">

    <ul class="c-menu-skip__list" role="menu">
        <li class="c-menu-skip__item" role="menuitem">
            <a href="#main-menu" class="c-menu-skip__link u-typo:xl">Direkt zur Hauptnavigation</a>
        </li>
        <li class="c-menu-skip__item" role="menuitem">
            <a href="#main-content" class="c-menu-skip__link u-typo:xl">Direkt zum Hauptinhalt</a>
        </li>
    </ul>

</nav>
 
<!--
    @int:
    place directly after <body>, has to be the first focusable element
    update translation for aria-label and link title if we have additional languages
-->
<nav class="c-menu-skip" aria-label="Sprunglink-Navigation">

    <ul class="c-menu-skip__list" role="menu">
        {{#each menuSkipItems}}
            <li class="c-menu-skip__item" role="menuitem">
                <a href="{{url}}" class="c-menu-skip__link u-typo:xl">{{title}}</a>
            </li>
        {{/each}}
    </ul>

</nav>
 
{
  "menuSkipItems": [
    {
      "title": "Direkt zur Hauptnavigation",
      "url": "#main-menu"
    },
    {
      "title": "Direkt zum Hauptinhalt",
      "url": "#main-content"
    }
  ]
}