<header class="u-appbar u-appbar--primary">
  <div class="u-toolbar">
    <h1 class="u-typography--h6 u-mb-xs-0">Home</h1>
  </div>
</header>

<header class="u-appbar u-appbar--primary">
  <div class="u-toolbar">
    <div class="u-grid-item u-xs-auto u-mr-xs-1">
      <button class="u-icon-button u-icon-button--inherit" aria-label="Menu">
        <svg
          class="u-icon-button__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </svg>
      </button>
    </div>
    <div class="u-grid-item u-xs-auto u-sm">
      <h1 class="u-typography--h4 u-mb-xs-0">Title</h1>
    </div>
    <div class="u-grid-item u-display--flex u-xs-auto u-ml-xs-auto">
      <button class="u-icon-button u-icon-button--inherit" aria-label="Search">
        <svg
          class="u-icon-button__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
          ></path>
        </svg>
      </button>
      <button class="u-button u-button--inherit u-mb-xs-0">Sign In</button>
    </div>
  </div>
</header>