5.1 navigation.navbar Navbar

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.

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