chromium/ash/webui/vc_background_ui/resources/js/vc_background_app.html

<style>
  :host {
    --app-breadcrumb-height: 56px;
  }

  div#breadcrumbArea {
    background-color: var(--cros-sys-app_base_shaded);
    display: grid;
    grid-template-areas: '. . breadcrumb . .';
    grid-template-columns: 1fr 4px minmax(568px, 920px) 10px 1fr;
    grid-template-rows: var(--app-breadcrumb-height);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 3;
  }

  sea-pen-router {
    --sea-pen-router-min-height: calc(100vh - var(--app-breadcrumb-height));
  }

  vc-background-breadcrumb {
    grid-area: breadcrumb;
  }
</style>
<div>
  <!-- dwell-time is set to 200ms to populate history state more quickly while
    still respecting the grace period defined in iron-location.  -->
  <iron-location path="{{path_}}" query="{{query_}}" dwell-time="200">
  </iron-location>
  <iron-query-params params-object="{{queryParams_}}"
      params-string="{{query_}}">
  </iron-query-params>
  <div id="breadcrumbArea">
    <vc-background-breadcrumb path="[[path_]]"
        sea-pen-template-id="[[queryParams_.seaPenTemplateId]]">
    </vc-background-breadcrumb>
  </div>
  <sea-pen-router base-path=""></sea-pen-router>
</div>