web/_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">
      {% for item in page.breadcrumb %}
        {% if item.url %}
        <span>
          <a href="{{ site.baseurl }}{{ item.url | remove: '.html'}}">
            {{ item.label }}
          </a>
        </span>
        {% else %}
          <span>{{ item.label }}</span>
        {% endif %}
      {% endfor %}

      {% unless page.layout == "home" %}
        <span>{{ page.title }}</span>
      {% endunless %}

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

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

    <div id="topbar-title">
      {% if page.layout == 'home' %}
        {{- site.title -}}
      {% elsif page.dynamic_title %}
        {{- page.title -}}
      {% else %}
        {{- 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" placeholder="{{ site.data.label.search_hint | default: 'Search' }}...">
      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
    </span>
    <span id="search-cancel" >Cancel</span>
  </div>

</div>