<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-tabs">
      <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modifiers/">
        Syntax
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/helpers/">
        Helpers
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
        Responsive helpers
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'color-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/color-helpers/">
        Color helpers
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
        Typography helpers
      </a>
    </div>
  </div>
</nav>