web/_includes/topbar.html

<!-- The Top Bar -->

<div id="topbar-wrapper">
  <div
    id="topbar"
    class="container d-flex align-items-center justify-content-between h-100"
  >
    <span id="breadcrumb">
      {% assign paths = page.url | split: '/' %}

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

      {% else %}
        {% for item in paths %}
          {% if forloop.first %}
            <span>
              <a href="{{ '/' | relative_url }}">
                {{ site.data.locales[include.lang].tabs.home | capitalize }}
              </a>
            </span>

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

          {% elsif page.layout == 'category' or page.layout == 'tag' %}
            <span>
              <a href="{{ item | relative_url }}">
                {{ site.data.locales[include.lang].tabs[item] | default: page.title }}
              </a>
            </span>
          {% 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[include.lang].title | default: site.title -}}
      {% elsif page.collection == 'tabs' or page.layout == 'page' %}
        {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
        {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}
      {% else %}
        {{- site.data.locales[include.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[include.lang].search.hint | capitalize }}..."
      >
    </span>
    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
  </div>
</div>