<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
<div class="vgr-secondary-navigation__header">
<a href="/" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">Praktisk information</a>
</div>
<div class="vgr-secondary-navigation__content">
<ul>
<li>
<a href="" data-selected data-isexpanded>Allmänna kurser</a>
<ul>
<li>
<a href="#">Plus</a>
</li>
<li>
<a href="#">Grafisk</a>
</li>
<li>
<a href="#">Friluftsliv</a>
</li>
<li>
<a href="#">Silver och smycke</a>
</li>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Spa och hälsa</a>
</li>
</ul>
</li>
<li>
<a href="#" data-haschildren>Särskilda kurser</a>
</li>
<li>
<a href="#" data-haschildren>Sommarkurser</a>
</li>
<li>
<a href="#" data-haschildren>Distanskurser</a>
</li>
</ul>
</div>
</nav>
<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
<div class="vgr-secondary-navigation__header">
<a href="{{ url }}" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">{{ title }}</a>
</div>
<div class="vgr-secondary-navigation__content">
<ul>
{% for item in items %}
<li>
<a href="{{ item.url }}"{% if item.selected %} data-selected{% if item.items %} data-isexpanded{% endif %}{% else %}{% if item.items %} data-haschildren{% endif %}{% endif %}>{{ item.title }}</a>
{% if item.selected and item.items %}
<ul>
{% for item2 in item.items %}
<li>
<a href="{{ item2.url }}">{{ item2.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{
"title": "Praktisk information",
"url": "/",
"items": [
{
"title": "Allmänna kurser",
"selected": true,
"items": [
{
"title": "Plus",
"url": "#"
},
{
"title": "Grafisk",
"url": "#"
},
{
"title": "Friluftsliv",
"url": "#"
},
{
"title": "Silver och smycke",
"url": "#"
},
{
"title": "Test",
"url": "#"
},
{
"title": "Spa och hälsa",
"url": "#"
}
]
},
{
"title": "Särskilda kurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
},
{
"title": "Sommarkurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
},
{
"title": "Distanskurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
}
]
}
.vgr-secondary-navigation {
display:none;
@media screen and (min-width: $medium) {
display:block;
}
&__header {
background: #005c95;
color: #fff;
}
}
.vgr-secondary-navigation__content a {
position:relative;
&:focus {
text-decoration:underline;
}
&[data-selected]:focus {
color:#000;
}
}
.vgr-secondary-navigation__content [data-hasChildren]:after,
.vgr-secondary-navigation__content [data-isExpanded]:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform:translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: .35rem 0 .35rem .35rem;
border-color: transparent transparent transparent #222;
}