STACK-NAVIGATION (Globale Elemente )
src/app/core/components/stack-navigation/templates
Demo Section
Each variation will be presented in the following section.
Readme
stackNavigation (coreComponent)
Description
This components contains the stack navigation. “Stack” because the nested lists are being shown as layers on top of each other. The list will be toggled by the main-navigation and the mobile-nav-toggler.
JIRA
Requirements
- @veams/core - Veams Core Framework.
- @veams/query or
jquery- Veams Query or jQuery. - @veams/component - Veams Component.
Fields
stack-navigation.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.stackNavigationClasses | String | '' |
Modifier classes for coreComponent |
| settings.stackNavigationJsOptions | Object | null |
JavaScript options object which gets stringified in the markup |
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Hidden headline for the navigation (accessibility) |
| content.closeBtnText | String | Hidden text for the close button (accessibility) |
| content.navigationLists | Array | Array of n-objects containing lists |
stack-navigation__list.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.navigationClasses | String | '' |
Modifier classes for this list |
| settings.navigationJsItem | String | '' |
Value for data-js-item selector |
Content
| Parameter | Type | Description |
|---|---|---|
| content.items | Array | Array of n-items containing list items |
stack-navigation__sublist.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.sublistClasses | String | '' |
Modifier classes for this sublist |
| settings.sublistJsItem | String | '' |
Value for data-js-item selector |
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Headline for the sublist |
| content.items | Array | Array of n-items containing list items |
stack-navigation__item.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.itemClasses | String | '' |
Modifier classes for this list item |
| settings.itemJsItem | String | '' |
Value for data-js-item selector |
Content
| Parameter | Type | Description |
|---|---|---|
| content.link | Object | Link item |
stack-navigation__link.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.linkClasses | String | '' |
Modifier classes for this link |
| settings.linkJsItem | String | '' |
Value for data-js-item selector |
Content
| Parameter | Type | Description |
|---|---|---|
| content.linkText | String | Text of the link |
| content.linkHref | String | Location the link points to |
JavaScript Options
The module gives you the possibility to override default options:
| Option | Type | Default | Description |
|---|---|---|---|
| selectors.navToggler | String | '[data-js-item="toggle-stack-navigation"]' |
Button that toggles stack navigation state |
| selectors.navClose | String | '[data-js-item="navigation-close"]' |
Button that closes the stack navigation component |
| selectors.navList | String | '[data-js-item="navigation-list"]' |
Navigation parent list of sublists |
| selectors.navSubList | String | '[data-js-item="navigation-sublist"]' |
List containing links or buttons to nested sublists |
| selectors.navItem | String | '[data-js-item="navigation-item"]' |
Button item that opens nested sublist |
| selectors.navSubHint | String | '[data-js-item="navigation-link-subhint"]' |
Element that displays the number of nested items |
| selectors.navCloseSublist | String | '[data-js-item="navigation-close-sublist"]' |
Button that closes the active sublist |
| selectors.navWrapper | String | '[data-js-item="navigation-wrapper"]' |
Element that contains the navigation lists |
| classes.active | String | 'is-active' |
Class for active component state |
| classes.expanded | String | 'is-expanded' |
Class for expanded component state |
| classes.hidden | String | 'is-hidden' |
Class for hidden component state |
| classes.levelDown | String | 'is-level-down' |
Class to highlight that a sublist is active and gets displayed |
| classes.notScrollable | String | 'isnt-scrollable' |
Class to disable scrolling on the body |
| classes.visible | String | 'is-visible' |
Class to show sublist |
SASS
Modifier Classes
You can add the following modifiers to c-stack-navigation:
| Modifier | Description |
|---|---|
| is-expanded | Will slide in the navigation that is out of sight initially |
You can add the following modifiers to stack-navigation__wrapper:
| Modifier | Description |
|---|---|
| is-level-down | Will handle scrolling issues in sublevels - is set to wrapper when in first sublevel |
You can add the following modifiers to stack-navigation__list-link:
| Modifier | Description |
|---|---|
| is-home | Will add an icon to this link |
| is-active | Will set active styles for this link |
You can add the following modifiers to stack-navigation__list-link-subhint:
| Modifier | Description |
|---|---|
| is-hidden | Will set display none |
You can add the following modifiers to stack-navigation__sublist:
| Modifier | Description |
|---|---|
| is-expanded | Will slide in this sublevel |
Templates
stack-navigation.hbs
<script type="text/javascript">
var navigationUrl = '/api/nav';
</script>
{{#if (prod)}}
<script type="text/javascript">
navigationUrl = '/assets/mocks/nav/nav.json';
</script>
{{/if}}
<script type="text/javascript">
function getQparam(name) {
var result = null;
var q = document.URL.split('?')[1];
if (q != undefined) {
var n = q.split('&');
if (n.length > 1) {
for (var i = 0; i < n.length; i++) {
var params = n[i].split('=');
if (params[0] == name) {
result = params[1];
}
}
} else {
var params = n[0].split('=');
if (params[0] == name) {
result = params[1];
}
}
return result;
}
}
var menuId = getQparam('menuid');
function vuenaviload() {LmuStackNavigation.init({config: {menuId, url: navigationUrl,fallbackError: {title: "Die Navigation funktioniert gerade nicht!",text: "Wir arbeiten daran. Bitte nutzen Sie bis dahin die Sitemap zum Navigieren in der Website."},lngVersions: {"settings": {"navigationClasses": "is-language","navigationJsItem": "2"},"content": {"headline": "Sprachversion","linkID": "84897","items": [{"settings": {"itemClasses": ""},"content": {"link": {"settings": {"linkClasses": ""},"content": {"linkHref": "https://www.lmu.de/en/workspace-for-students/career-services/career-community-events/career-and-networking-events/index.html","linkText": "English","linkLang": "en","linkTextA11y": "Zur englischen Sprachversion / Switch to English","linkID": "84897"}}}}]}}}});};
window.addEventListener("load", vuenaviload);
</script>
<div id="stacknav"></div>
<div id="mobilenav">
<mobile-navigation-app></mobile-navigation-app>
</div>
<nav class="c-stack-navigation is-tab-hidden{{#if settings.stackNavigationClasses}} {{settings.stackNavigationClasses}}{{/if}}"
data-js-module="stack-navigation"{{#if settings.stackNavigationJsOptions}}
data-js-options='{{stringify settings.stackNavigationJsOptions}}'{{/if}}>
<h3 class="stack-navigation__headline">{{content.headline}}</h3>
<button class="stack-navigation__close" data-js-item="navigation-close">{{content.closeBtnText}}</button>
<div class="stack-navigation__wrapper" data-js-item="navigation-wrapper">
{{#each content.navigationLists }}
{{> stack-navigation__list }}
{{/each}}
</div>
</nav>
stack-navigation__item.hbs
<li class="stack-navigation__list-item{{#if settings.itemClasses}} {{settings.itemClasses}}{{/if}}"{{#if settings.itemJsItem}} data-js-item="{{settings.itemJsItem}}"{{/if}}>
{{#with content.link}}
{{> stack-navigation__link}}
{{/with}}
{{#with content.sublist}}
{{> stack-navigation__sublist}}
{{/with}}
</li>
stack-navigation__link.hbs
<a{{#if settings.tabindex}} tabindex="{{settings.tabindex}}"{{/if}} href="{{content.linkHref}}" class="stack-navigation__list-link{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}"{{#if settings.linkJsItem}} data-js-item="{{settings.linkJsItem}}"{{/if}}>
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">{{content.linkText}}</span>
{{#if content.linkLang}}
<span class="stack-navigation__list-link-text-a11y" lang="{{content.linkLang}}">{{content.linkTextA11y}}</span>
{{else}}
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
{{/if}}
</div>
</a>
stack-navigation__list.hbs
{{#if content.headline}}<h4 class="stack-navigation__sub-headline{{#if settings.navigationClasses}} {{settings.navigationClasses}}{{/if}}">{{content.headline}}</h4>{{/if}}
<ul tabindex="-1" class="stack-navigation__list{{#if settings.navigationClasses}} {{settings.navigationClasses}}{{/if}}"{{#if settings.navigationJsItem}} data-js-item="{{settings.navigationJsItem}}"{{/if}}>
{{#each content.items}}
{{> stack-navigation__item}}
{{/each}}
</ul>
stack-navigation__sublist.hbs
<ul aria-label="{{content.headline}}" class="stack-navigation__sublist{{#if settings.sublistClasses}} {{settings.sublistClasses}}{{/if}}"{{#if settings.sublistJsItem}} data-js-item="{{settings.sublistJsItem}}"{{/if}}>
{{#each content.items}}
{{> stack-navigation__item}}
{{/each}}
<li><button class="stack-navigation__close-sublist" data-js-item="navigation-close-sublist">Zurück</button><span class="is-aural"> zur vorherigen Navigationsebene</span></li>
</ul>
Data File
stack-navigation.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Defaults"
},
"settings": {
"stackNavigationClasses": "",
"stackNavigationJsOptions": null
},
"content": {
"headline": "Hauptnavigation",
"closeBtnText": "Navigation schließen",
"navigationLists": [
{
"settings": {
"navigationClasses": "",
"navigationJsItem": "navigation-list"
},
"content": {
"items": [
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "is-home",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "LMU Startseite"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": "navigation-item"
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": "navigation-link"
},
"content": {
"linkHref": "#",
"linkText": "Studium"
}
},
"sublist": {
"settings": {
"sublistClasses": "",
"sublistJsItem":
"navigation-list"
},
"content": {
"headline": "Studium",
"items": [
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"detail-page.html",
"linkText":
"Übersicht Studium"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem":
"navigation-item"
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
"navigation-link"
},
"content": {
"linkHref":
"#",
"linkText":
"Level 1 - SubLink 2"
}
},
"sublist": {
"settings": {
"sublistClasses":
"",
"sublistJsItem":
"navigation-list"
},
"content": {
"headline":
"Level 2",
"items": [
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"detail-page-3.html",
"linkText":
"Level 2 -Link 1"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 2"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 3"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
}
]
}
}
}
}
]
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": "navigation-link"
},
"content": {
"linkHref":
"detail-page-2.html",
"linkText": "Forschung"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": "navigation-link"
},
"content": {
"linkHref": "#",
"linkText": "Die LMU"
}
}
}
}
]
}
},
{
"settings": {
"navigationClasses": "",
"navigationJsItem": ""
},
"content": {
"headline": "Häufig gesucht",
"items": [
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Newsroom"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Workspace Studium"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText":
"Workspace Beschäftigte"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Studienangebot"
}
}
}
}
]
}
},
{
"settings": {
"navigationClasses": "",
"navigationJsItem": ""
},
"content": {
"headline": "Service",
"items": [
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Karriere"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Presse"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "Kontakt"
}
}
}
},
{
"settings": {
"itemClasses": "",
"itemJsItem": "navigation-item"
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": "navigation-link"
},
"content": {
"linkHref": "#",
"linkText": "Kontakt ende"
}
},
"sublist": {
"settings": {
"sublistClasses":
"",
"sublistJsItem":
"navigation-list"
},
"content": {
"headline":
"Level 2",
"items": [
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"detail-page-3.html",
"linkText":
"Level 2 -Link 1"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 2"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 3"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
"navigation-item"
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
"navigation-link"
},
"content": {
"linkHref":
"#",
"linkText":
"Level 2 -Link 4"
}
},
"sublist": {
"settings": {
"sublistClasses":
"",
"sublistJsItem":
"navigation-list"
},
"content": {
"headline":
"Level 2",
"items": [
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"detail-page-3.html",
"linkText":
"Level 3 -Link 1"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 2"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 3"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
},
{
"settings": {
"itemClasses":
"",
"itemJsItem":
""
},
"content": {
"link": {
"settings": {
"linkClasses":
"",
"linkJsItem":
""
},
"content": {
"linkHref":
"#",
"linkText":
"Level 3 -Link 4"
}
}
}
}
]
}
}
}
}
]
}
}
}
}
]
}
},
{
"settings": {
"navigationClasses": "is-language",
"navigationJsItem": ""
},
"content": {
"headline": "Sprachversion",
"items": [
{
"settings": {
"itemClasses": "",
"itemJsItem": ""
},
"content": {
"link": {
"settings": {
"linkClasses": "",
"linkJsItem": ""
},
"content": {
"linkHref": "#",
"linkText": "EN",
"linkLang": "en",
"linkTextA11y":
"Zur englischen Sprachversion / Switch to English"
}
}
}
}
]
}
}
]
}
}
}
}
Styles
stack-navigation.scss
Scripts
stack-navigation.js
HTML Output
Defaults
<script type="text/javascript">
var navigationUrl = '/api/nav';
</script>
<script type="text/javascript">
navigationUrl = '/assets/mocks/nav/nav.json';
</script>
<script type="text/javascript">
function getQparam(name) {
var result = null;
var q = document.URL.split('?')[1];
if (q != undefined) {
var n = q.split('&');
if (n.length > 1) {
for (var i = 0; i < n.length; i++) {
var params = n[i].split('=');
if (params[0] == name) {
result = params[1];
}
}
} else {
var params = n[0].split('=');
if (params[0] == name) {
result = params[1];
}
}
return result;
}
}
var menuId = getQparam('menuid');
function vuenaviload() {
LmuStackNavigation.init({
config: {
menuId,
url: navigationUrl,
fallbackError: {
title: "Die Navigation funktioniert gerade nicht!",
text: "Wir arbeiten daran. Bitte nutzen Sie bis dahin die Sitemap zum Navigieren in der Website."
},
lngVersions: {
"settings": {
"navigationClasses": "is-language",
"navigationJsItem": "2"
},
"content": {
"headline": "Sprachversion",
"linkID": "84897",
"items": [{
"settings": {
"itemClasses": ""
},
"content": {
"link": {
"settings": {
"linkClasses": ""
},
"content": {
"linkHref": "https://www.lmu.de/en/workspace-for-students/career-services/career-community-events/career-and-networking-events/index.html",
"linkText": "English",
"linkLang": "en",
"linkTextA11y": "Zur englischen Sprachversion / Switch to English",
"linkID": "84897"
}
}
}
}]
}
}
}
});
};
window.addEventListener("load", vuenaviload);
</script>
<div id="stacknav"></div>
<div id="mobilenav">
<mobile-navigation-app></mobile-navigation-app>
</div>
<nav class="c-stack-navigation is-tab-hidden" data-js-module="stack-navigation">
<h3 class="stack-navigation__headline">Hauptnavigation</h3>
<button class="stack-navigation__close" data-js-item="navigation-close">Navigation schließen</button>
<div class="stack-navigation__wrapper" data-js-item="navigation-wrapper">
<ul tabindex="-1" class="stack-navigation__list" data-js-item="navigation-list">
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link is-home">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">LMU Startseite</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item" data-js-item="navigation-item">
<a href="#" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Studium</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a>
<ul aria-label="Studium" class="stack-navigation__sublist" data-js-item="navigation-list">
<li class="stack-navigation__list-item">
<a href="detail-page.html" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Übersicht Studium</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item" data-js-item="navigation-item">
<a href="#" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 1 - SubLink 2</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a>
<ul aria-label="Level 2" class="stack-navigation__sublist" data-js-item="navigation-list">
<li class="stack-navigation__list-item">
<a href="detail-page-3.html" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 1</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 2</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 3</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li><button class="stack-navigation__close-sublist" data-js-item="navigation-close-sublist">Zurück</button><span class="is-aural"> zur vorherigen Navigationsebene</span></li>
</ul>
</li>
<li><button class="stack-navigation__close-sublist" data-js-item="navigation-close-sublist">Zurück</button><span class="is-aural"> zur vorherigen Navigationsebene</span></li>
</ul>
</li>
<li class="stack-navigation__list-item">
<a href="detail-page-2.html" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Forschung</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Die LMU</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
</ul>
<h4 class="stack-navigation__sub-headline">Häufig gesucht</h4>
<ul tabindex="-1" class="stack-navigation__list">
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Newsroom</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Workspace Studium</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Workspace Beschäftigte</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Studienangebot</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
</ul>
<h4 class="stack-navigation__sub-headline">Service</h4>
<ul tabindex="-1" class="stack-navigation__list">
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Karriere</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Presse</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item" data-js-item="navigation-item">
<a href="#" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Kontakt ende</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a>
<ul aria-label="Level 2" class="stack-navigation__sublist" data-js-item="navigation-list">
<li class="stack-navigation__list-item">
<a href="detail-page-3.html" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 1</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 2</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 3</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item" data-js-item="navigation-item">
<a href="#" class="stack-navigation__list-link" data-js-item="navigation-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 2 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a>
<ul aria-label="Level 2" class="stack-navigation__sublist" data-js-item="navigation-list">
<li class="stack-navigation__list-item">
<a href="detail-page-3.html" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 1</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 2</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 3</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">Level 3 -Link 4</span>
<span class="stack-navigation__list-link-subhint is-hidden" data-js-item="navigation-link-subhint"><span class="stack-navigation__list-link-subhint-text" data-js-item="navigation-link-subhint-text"></span><span class="is-aural"> Unterpunkte auf der nächsten Ebene</span></span>
</div>
</a></li>
<li><button class="stack-navigation__close-sublist" data-js-item="navigation-close-sublist">Zurück</button><span class="is-aural"> zur vorherigen Navigationsebene</span></li>
</ul>
</li>
<li><button class="stack-navigation__close-sublist" data-js-item="navigation-close-sublist">Zurück</button><span class="is-aural"> zur vorherigen Navigationsebene</span></li>
</ul>
</li>
</ul>
<h4 class="stack-navigation__sub-headline is-language">Sprachversion</h4>
<ul tabindex="-1" class="stack-navigation__list is-language">
<li class="stack-navigation__list-item">
<a href="#" class="stack-navigation__list-link">
<div class="stack-navigation__list-link-content">
<span class="stack-navigation__list-link-text">EN</span>
<span class="stack-navigation__list-link-text-a11y" lang="en">Zur englischen Sprachversion / Switch to English</span>
</div>
</a></li>
</ul>
</div>
</nav>