<ul class="navbar-nav navbar-nav-mega" role="menu">
<li class="nav-item active" role="none">
<a href="#" id="nav-item-1" class="nav-link" role="menuitem">
<span class="nav-link-text">
Home <span class="sr-only">(current)</span>
</span>
</a>
</li>
<li class="nav-item" role="none">
<a href="" id="nav-item-2" class="nav-link" role="menuitem">
<span class="nav-link-text">
</span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-3" class="nav-link" role="menuitem">
<span class="nav-link-text">
Customizings </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-4" class="nav-link" role="menuitem">
<span class="nav-link-text">
Features </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-5" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Pages </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Pages
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Pages">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Default </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 25/75 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 50/50 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns, Offset Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
3 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Simple </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Feature </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Startpage </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-6" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Content Examples </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Content Examples
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Content Examples">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Text </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Text">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Rich Text </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Headers </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Bullet List </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text with Teaser </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Icon </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text in Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
List Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Panel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Table </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Quote </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Media">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Audio </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Card Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Icon Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Gallery </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
File downloads </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
External Media </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Interactive </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Interactive">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Accordion </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Carousel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Tab </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Timeline </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Form elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Form elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Forms </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Login </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Search </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Menu's </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Menu's">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Abstract </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Cards </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Cards">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Categorized </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Recently Updated </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Related Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sections </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sitemap </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Thumbnails </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Thumbnails">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Special elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Special elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Insert records </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
HTML </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Divider </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
And more... </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="And more...">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Frames </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images with links </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Languages and characters </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
{% import _self as mega %}
{% macro panelNav(parent, level) %}
{% import _self as mega %}
<ul class="panel-nav panel-nav-level-{{ level }}"
role="menu"
aria-label="{{ parent.title }}">
{% for item in parent.children %}
{% if item.spacer %}
<li class="panel-nav-divider" role="none"></li>
{% else %}
{% set itemClasses = [''] %}
{% if item.children %}
{% set itemClasses = itemClasses|merge('panel-') %}
{% endif %}
<li class="panel-nav-item panel-nav-item-level-{{ level }}"
role="none">
{% set linkAttributes = [''] %}
{% set linkClasses = [''] %}
{% if item.active %}
{% set linkClasses = linkClasses|merge(' active') %}
{% endif %}
{% if item.target %}
{% set childLinkAttributeTarget =
linkAttributes|merge(
' target="' ~ item.target ~ '"'
)
%}
{% endif %}
<a class="panel-nav-link panel-nav-link-level-{{
level
}}{{ linkClasses|join }}"
href="{{ item.link }}"
role="menuitem"
{{ linkAttributes|join }}>
<span class="panel-nav-text">
{{ item.title }}{% if item.current %}
<span class="sr-only">(current)</span>
{% endif %}
</span>
</a>
{% if item.children %}
{% set nextLevel = level + 1 %}
<button class="panel-nav-toggle"
aria-haspopup="true"
aria-expanded="false">
{% include '@atom-icon' with {
class: 'panel-nav-toggle-icon',
icon: 'streamline-icon-keyboard-arrow-right',
width: '20px',
height: '20px'
} %}
</button>
{{ mega.panelNav(item, nextLevel) }}
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endmacro %}
{% macro panel(item) %}
{% import _self as mega %}
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="{{ item.link }}" role="menuitem">
{{ item.title }}
</a>
<button class="panel-close">
{% include '@atom-icon' with {
class: 'panel-close-icon',
icon: 'streamline-icon-close',
width: '20px',
height: '20px'
} %}
</button>
</div>
</div>
</div>
<div class="row">
{{ mega.panelNav(item, 1) }}
</div>
</div>
</div>
{% endmacro %}
{% block main %}
{% if menu %}
<ul class="navbar-nav navbar-nav-mega" role="menu">
{% for item in menu %}
{% set itemClassActive = '' %}
{% if item.active %}
{% set itemClassActive = ' active' %}
{% endif %}
<li class="nav-item{{ itemClassActive }}{{ itemClassChildren }}"
role="none">
{% set linkClasses = [''] %}
{% set linkAttributes = [''] %}
{% if item.children %}
{% set linkClasses =
linkClasses|merge(' panel-toggle')
%}
{% set linkAttributes =
linkAttributes|merge(
[
' aria-haspopup="true"',
' aria-expanded="false"'
]
)
%}
{% endif %}
{% set linkAttributeTarget = '' %}
{% if item.target %}
{% set linkAttributeTarget = ' target="' ~ item.target
~ '"'
%}
{% endif %}
{% set itemDataUid = loop.index %}
<a href="{{ item.link }}"
id="nav-item-{{ itemDataUid }}"
class="nav-link{{ linkClasses|join }}"
role="menuitem"
{{ linkAttributes|join }}
{{ linkAttributeTarget }}>
<span class="nav-link-text">
{{ item.title }}{% if item.current %}
<span class="sr-only">(current)</span>
{% endif %}
</span>
</a>
{% if item.children %}
{{ mega.panel(item) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": null,
"header_color": null,
"header_layout": 2,
"header_link": null,
"header_position": null,
"header_style": null,
"layout": null,
"space_after_class": null,
"space_before_class": null,
"space_inner_after_class": null,
"space_inner_before_class": null,
"subheader": null,
"target": null,
"menu": [
{
"title": "Home",
"link": "#",
"target": null,
"active": true,
"current": true
},
{
"spacer": true
},
{
"link": "#",
"title": "Customizings"
},
{
"link": "#",
"title": "Features"
},
{
"link": "#",
"title": "Pages",
"children": [
{
"link": "#",
"title": "Default"
},
{
"link": "#",
"title": "2 Columns"
},
{
"link": "#",
"title": "2 Columns 25/75"
},
{
"link": "#",
"title": "2 Columns 50/50"
},
{
"link": "#",
"title": "2 Columns, Offset Right"
},
{
"link": "#",
"title": "3 Columns"
},
{
"link": "#",
"title": "Simple"
},
{
"link": "#",
"title": "Subnavigation, Left"
},
{
"link": "#",
"title": "Subnavigation, Left and 2 Columns"
},
{
"link": "#",
"title": "Subnavigation, Right"
},
{
"link": "#",
"title": "Subnavigation, Right and 2 Columns"
},
{
"link": "#",
"title": "Feature"
},
{
"link": "#",
"title": "Startpage"
}
]
},
{
"link": "#",
"title": "Content Examples",
"children": [
{
"link": "#",
"title": "Text",
"children": [
{
"link": "#",
"title": "Rich Text"
},
{
"link": "#",
"title": "Headers"
},
{
"link": "#",
"title": "Bullet List"
},
{
"link": "#",
"title": "Text with Teaser"
},
{
"link": "#",
"title": "Text and Icon"
},
{
"link": "#",
"title": "Text in Columns"
},
{
"link": "#",
"title": "List Group"
},
{
"link": "#",
"title": "Panel"
},
{
"link": "#",
"title": "Table"
},
{
"link": "#",
"title": "Quote"
}
]
},
{
"link": "#",
"title": "Media",
"children": [
{
"link": "#",
"title": "Audio"
},
{
"link": "#",
"title": "Card Group"
},
{
"link": "#",
"title": "Icon Group"
},
{
"link": "#",
"title": "Gallery"
},
{
"link": "#",
"title": "Text and Images"
},
{
"link": "#",
"title": "Text and Media"
},
{
"link": "#",
"title": "File downloads"
},
{
"link": "#",
"title": "Images"
},
{
"link": "#",
"title": "Media"
},
{
"link": "#",
"title": "External Media"
}
]
},
{
"link": "#",
"title": "Interactive",
"children": [
{
"link": "#",
"title": "Accordion"
},
{
"link": "#",
"title": "Carousel"
},
{
"link": "#",
"title": "Tab"
},
{
"link": "#",
"title": "Timeline"
}
]
},
{
"link": "#",
"title": "Form elements",
"children": [
{
"link": "#",
"title": "Forms"
},
{
"link": "#",
"title": "Login"
},
{
"link": "#",
"title": "Search"
}
]
},
{
"link": "#",
"title": "Menu's",
"children": [
{
"link": "#",
"title": "Abstract"
},
{
"link": "#",
"title": "Cards",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
},
{
"link": "#",
"title": "Categorized"
},
{
"link": "#",
"title": "Pages"
},
{
"link": "#",
"title": "Recently Updated"
},
{
"link": "#",
"title": "Related Pages"
},
{
"link": "#",
"title": "Sections"
},
{
"link": "#",
"title": "Sitemap"
},
{
"link": "#",
"title": "Thumbnails",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
}
]
},
{
"link": "#",
"title": "Special elements",
"children": [
{
"link": "#",
"title": "Insert records"
},
{
"link": "#",
"title": "HTML"
},
{
"link": "#",
"title": "Divider"
}
]
},
{
"link": "#",
"title": "And more...",
"children": [
{
"link": "#",
"title": "Frames"
},
{
"link": "#",
"title": "Images with links"
},
{
"link": "#",
"title": "Languages and characters"
}
]
}
]
}
]
}
import { init as initMenu } from "./scripts/menus";
// init
const megaMenus = document.querySelectorAll(".navbar-nav-mega");
if (megaMenus) {
Array.prototype.forEach.call(megaMenus, (menu) => {
initMenu(menu);
});
}
.navbar-nav-mega {
flex-direction: row;
margin-right: -$navbar-nav-link-padding-x;
margin-left: -$navbar-nav-link-padding-x;
.container {
display: block;
}
.nav-link {
position: relative;
@include hover-focus () {
&::before {
transform: scaleX(1);
transform-origin: 0 0;
}
}
&::before {
position: absolute;
top: calc(100% - #{$nav-link-padding-y});
right: $navbar-nav-link-padding-x;
left: $navbar-nav-link-padding-x;
display: block;
height: 2px;
margin: 0;
content: "";
background-color: currentColor;
border: none;
transition: transform .2s ease-in-out;
transform: scaleX(0);
transform-origin: 100% 0;
backface-visibility: hidden;
will-change: transform;
}
&.panel-toggle {
@include caret();
}
}
.dropdown-item {
padding-right: 0;
padding-left: 0;
}
}
.panel {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 1;
display: none;
width: 100%;
height: calc(100vh + -100%);
padding-top: $grid-gutter-width;
padding-bottom: $grid-gutter-width;
background-color: $white;
&.show {
display: block;
}
}
.panel-headline {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.panel-close {
flex: 0 0 auto;
margin-left: $grid-gutter-width;
background: none;
border: none;
}
.panel-nav {
position: absolute;
top: 0;
left: 100%;
width: 100%;
padding-right: $grid-gutter-width / 2;
padding-left: $grid-gutter-width / 2;
margin-bottom: 0;
list-style: none;
visibility: hidden;
opacity: 0;
transition: opacity .15s linear, visibility 0s .15s linear;
&-level-1 {
position: relative;
top: auto;
left: auto;
display: block;
width: 33.33%;
opacity: 1;
}
&-level-1,
&.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
}
.panel-nav-item {
display: flex;
border-bottom: 1px solid $gray-300;
&:last-child {
border-bottom: none;
}
}
.panel-nav-link {
display: block;
flex: 1 1 auto;
padding-top: 8px;
padding-bottom: 8px;
}
.panel-nav-toggle {
flex: 0 0 auto;
background: none;
border: none;
svg {
display: block;
}
}
No notes defined.