5 navigation Navigation
Navigation components are specialized design components that are used for page navigation.
Source:
styles.scss, line 39
5.1 navigation.navbar Navbar
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
A simple component to get navigation links to appear in one line. This is mainly used to create navigation for small subsections on the application.
Example
Markup: navigation/navbar/navbar.twig
<ul class="navbar">
{%for item in items%}
<li class="navbar__item">
<a href="{{ item.url }}" class="navbar__link{% if item.active %} is-active{% endif %}">
{{ item.title }}
</a>
</li>
{%endfor%}
</ul>
Source:
navigation/navbar/navbar.scss, line 1