<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
        Container
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/hero/">
        Hero
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/section/">
        Section
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/footer/">
        Footer
      </a>
    </div>
  </div>
</nav>
