<nav class="primary-navigation primary-navigation--selected js-primary-navigation" aria-label="Primary Navigation" role="navigation">
<ul id="primary-navigation-list" class="primary-navigation-list" role="menu">
<li class="primary-navigation-item" role="menuitem">
<a href="../../components/preview/products.html">Products</a>
</li>
<li class="primary-navigation-item is-selected" role="menuitem">
<strong>How It Works</strong>
</li>
<li class="primary-navigation-item" role="menuitem">
<a href="../../components/preview/car-guide.html">Car Guide</a>
</li>
<li class="primary-navigation-item" role="menuitem">
<a href="#">Customer Service</a>
</li>
<li class="primary-navigation-item" role="menuitem">
<a href="#">Webshop</a>
</li>
</ul>
</nav>
<nav class="primary-navigation{% if primaryNavigationModifiers is defined and primaryNavigationModifiers|length %} primary-navigation--{{ primaryNavigationModifiers|join(' primary-navigation--') }}{% endif %} js-primary-navigation" aria-label="Primary Navigation" role="navigation">
<ul id="primary-navigation-list" class="primary-navigation-list" role="menu">
{% for item in primaryNavigationItems %}
<li class="primary-navigation-item{{ item.selected ? ' is-selected' : '' }}" role="menuitem">
{% if item.selected %}
<strong{% if item['modifiers'] is defined and item['modifiers']|length %} class="{{ item.modifiers|join(' ') }}"{% endif %}>{{ item.title }}</strong>
{% else %}
<a href="{{ item.url }}"{% if item['modifiers'] is defined and item['modifiers']|length %} class="{{ item.modifiers|join(' ') }}"{% endif %}>{{ item.title }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{
"primaryNavigationItems": [
{
"title": "Products",
"url": "../../components/preview/products.html"
},
{
"title": "How It Works",
"url": "#",
"selected": true
},
{
"title": "Car Guide",
"url": "../../components/preview/car-guide.html"
},
{
"title": "Customer Service",
"url": "#"
},
{
"title": "Webshop",
"url": "#"
}
],
"primaryNavigationModifiers": [
"selected"
]
}
No notes defined.