<nav class="frame frame-type-subnavigation frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none" role="navigation">
<div class="frame-container">
<div class="frame-inner">
<ul class="subnav-nav">
<li class="subnav-item active">
<a href="#" id="subnav-item-1" class="subnav-link" target="_blank" title="Lorem">
<span class="subnav-link-text">Lorem <span class="sr-only">(current)</span></span>
</a>
<ul class="subnav-nav">
<li class="subnav-item">
<a href="" id="subnav-item-1" class="subnav-link" title="Child 1">
<span class="subnav-link-text">Child 1</span>
</a>
<ul class="subnav-nav">
<li class="subnav-item">
<a href="" id="subnav-item-1" class="subnav-link" title="Subchild 2">
<span class="subnav-link-text">Subchild 2</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="subnav-divider"></li>
<li class="subnav-item">
<a href="#" id="subnav-item-3" class="subnav-link" title="impsum">
<span class="subnav-link-text">impsum</span>
</a>
</li>
<li class="subnav-item">
<a href="#" id="subnav-item-4" class="subnav-link" title="dolor">
<span class="subnav-link-text">dolor</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
{% macro subnavigationItem(menu) %}
{% import _self as subnav %}
{% if menu %}
<ul class="subnav-nav">
{% for item in menu %}
{% if item.spacer %}
<li class="subnav-divider"></li>
{% else %}
<li class="subnav-item{% if item.active %} active{% endif %}">
<a href="{{ item.link }}" id="subnav-item-{{ loop.index }}"
class="subnav-link"{% if item.target %} target="{{ item.target }}"{% endif %}
title="{{ item.title }}">
{# TODO: {% if item.icon %}
<span class="subnav-link-icon">
{% if item.icon.0.extension == 'svg' %}
<bk2k:inlineSvg image="{{ item.icon.0 }}" width="{{ theme.subnavigation.icon.width }}" height="{{ theme.subnavigation.icon.height }}" />
{% else %}
<f:image additionalAttributes="{loading: 'lazy'}" image="{{ item.icon.0 }}" alt="{{ item.icon.0.alternative }}" title="{{ item.icon.0.title }}" width="{{ theme.subnavigation.icon.width }}" height="{{ theme.subnavigation.icon.height }}" />
{% endif %}
</span>
{% endif %} #}
<span class="subnav-link-text">{{ item.title }}{% if item.current %} <span class="sr-only">(current)</span>{% endif %}</span>
</a>
{% if item.children %}
{{ subnav.subnavigationItem(item.children, theme) }}
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{% block main %}
{% import _self as subnav %}
{% if menu %}
{# TODO: map frame type, abckground, space… #}
<nav class="frame frame-type-subnavigation frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none" role="navigation">
<div class="frame-container">
<div class="frame-inner">
{{ subnav.subnavigationItem(menu, theme) }}
</div>
</div>
</nav>
{% 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": "Lorem",
"link": "#",
"target": "_blank",
"active": true,
"current": true,
"children": [
{
"title": "Child 1",
"children": [
{
"title": "Subchild 2"
}
]
}
]
},
{
"spacer": true
},
{
"title": "impsum",
"link": "#"
},
{
"title": "dolor",
"link": "#"
}
]
}
No notes defined.