2.2.1 global.navigation.navbar Navbar

Toggle example guides Toggle HTML markup

A simple method to get navigation links to appear in one line.

@TODO: Replace this image mock-up with an HTML/CSS/JS implementation.

Examples
Default styling
.navbar--mobile
Mobile version (closed)
.navbar--mobile.is-active
Mobile version (open)
Markup: navigation/navbar/navbar.twig 
<div class="navbar {{ modifier_class }}">
  {% if modifier_class == 'navbar--mobile' %}
    <img src="components/navigation/navbar/mockup-mobile.png" width="195" height="52" />
  {% elseif modifier_class == 'navbar--mobile is-active' %}
    <img src="components/navigation/navbar/mockup-mobile-active.png" width="375" height="797" />
  {% else %}
    <img src="components/navigation/navbar/mockup.png" width="938" height="208" />
  {% endif %}
</div>
Source: navigation/navbar/_navbar.scss, line 4