krata/_includes/topbar.html

<!--
  The Top Bar
-->

<div id="topbar-wrapper" class="row justify-content-center topbar-down">
  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
    <span id="breadcrumb">

    {% assign paths = page.url | split: '/' %}

    {% if paths.size == 0 or page.layout == 'home' %}
      <!-- index page -->
      <span>{{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}</span>

    {% else %}

      {% for item in paths %}

        {% if forloop.first %}
          <span>
            <a href="{{ '/' | relative_url }}">
              {{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}
            </a>
          </span>

        {% elsif forloop.last %}

          {% if page.collection == 'tabs' %}
            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
          {% else %}
            <span>{{ page.title }}</span>
          {% endif %}

        {% else %}

          {% unless page.layout == 'post' %}
            <span>
              <a href="{{ item | relative_url }}">
                {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
              </a>
            </span>
          {% endunless %}

        {% endif %}

      {% endfor %}

    {% endif %}

    </span><!-- endof #breadcrumb -->

    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>

    <div id="topbar-title">
      {% if page.layout == 'home' %}
        {{- site.data.locales[site.lang].title | default: site.title -}}
      {% elsif page.collection == 'tabs' %}
        {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
      {% else %}
        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
      {% endif %}
    </div>

    <i id="search-trigger" class="fas fa-search fa-fw"></i>
    <span id="search-wrapper" class="align-items-center">
      <i class="fas fa-search fa-fw"></i>
      <input class="form-control" id="search-input" type="search"
        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | default: 'Search' | capitalize }}...">
      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
    </span>
    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel | default: 'Cancel' }}</span>
  </div>

</div>