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

<style include="cr-icons cros-button-style common">
  #container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
  }

  #selector {
    align-items: center;
    box-sizing: border-box;
    color: var(--cros-text-color-secondary);
    display: flex;
    flex-flow: row nowrap;
    font: var(--cros-headline-1-font);
    height: 100%;
    width: 100%;
  }

  :host-context(body.jelly-enabled) #selector {
    font: var(--cros-title-1-font);
  }

  .breadcrumb {
    --ink-color: rgba(var(--cros-ripple-color-rgb), 1);
    --paper-ripple-opacity: var(--cros-ripple-opacity);
    --text-color: var(--cros-text-color-secondary);
    border: none;
    min-width: 48px;
  }

  .breadcrumb:not(last-of-type) {
    flex: 0 0 auto;
  }

  .breadcrumb:last-of-type {
    --text-color: var(--cros-text-color-primary);
    flex: 0 1 auto;
  }

  iron-icon[icon='cr:chevron-right'] {
    flex: 0 0 auto;
  }

  :host-context(body.jelly-enabled) cr-button {
    --text-color: var(--cros-sys-on_surface);
    background-color: transparent;
  }

  #seaPenDropdown {
    --iron-icon-fill-color: var(--cros-sys-secondary);
    padding-inline-start: 12px;
  }

  .dropdown-check {
    margin-inline-end: 16px;
  }

  button:not([aria-checked='true']) iron-icon.dropdown-check {
    visibility: hidden;
  }

  button {
    padding: 8px 32px 8px 16px;
  }
</style>
<nav id="container">
  <iron-a11y-keys id="keys" keys="left right" on-keys-pressed="onKeysPress_">
  </iron-a11y-keys>
  <iron-selector id="selector"
      selectable=".selectable"
      selected="0"
      selected-item="{{selectedBreadcrumb_}}">
    <template is="dom-repeat" items="[[breadcrumbs_]]" as="breadcrumb">
      <template is="dom-if" if="[[index]]">
        <iron-icon icon="cr:chevron-right" aria-hidden="true"></iron-icon>
      </template>
      <template is="dom-if" if="[[!shouldShowSeaPenDropdown_(path, breadcrumb)]]" restamp>
        <cr-button class="breadcrumb selectable"
            role="link"
            aria-current$="[[getBreadcrumbAriaCurrent_(index, breadcrumbs_)]]"
            tabindex$="[[getInitialTabIndex_(index)]]"
            id="breadcrumb[[index]]"
            on-click="onBreadcrumbClick_">
          <div class="ellipsis" title$="[[breadcrumb]]">[[breadcrumb]]</div>
        </cr-button>
      </template>
      <template is="dom-if" if="[[shouldShowSeaPenDropdown_(path, breadcrumb)]]" restamp>
        <cr-button class="breadcrumb selectable"
            aria-haspopup="true"
            aria-controls="actionMenu"
            id="breadcrumb[[index]]"
            on-click="onClickMenuIcon_">
          <div class="ellipsis" title$="[[breadcrumb]]">[[breadcrumb]]</div>
          <iron-icon id="seaPenDropdown" icon="cr:arrow-drop-down"></iron-icon>
        </cr-button>
    </template>
    <cr-action-menu
        accessibility-label="$i18n{seaPenTemplateHeading}"
        role-description="$i18n{seaPenMenuRoleDescription}">
      <template is="dom-repeat" items="[[seaPenTemplates_]]" as="template">
        <button
            aria-checked$="[[getAriaChecked_(template.id, seaPenTemplateId)]]"
            class="dropdown-item"
            role="menuitemcheckbox"
            data-id$="[[template.id]]"
            on-click="onClickMenuItem_">
          <iron-icon class="dropdown-check" icon="cr:check"></iron-icon>
          [[template.title]]
        </button>
      </template>
    </cr-action-menu>
  </iron-selector>
</nav>