chrome/browser/resources/webui_gallery/app.html

<style include="cr-nav-menu-item-style">
  :host {
    display: flex;
    height: 100%;
  }

  #sidebar {
    border-inline-end: 1px solid var(--cr-separator-color);
    box-sizing: border-box;
    min-width: 256px;
    overflow: auto;
  }

  #selector {
    padding-inline-end: 12px;
  }

  h1 {
    color: var(--cr-primary-text-color);
    font-size: 170%;
    font-weight: 500;
    padding-inline-start: 24px;
  }

  iframe {
    border: none;
    height: 100%;
    width: 100%;
  }

  #main {
    flex: 1;
    overflow: auto;
    padding: 16px;
  }

  #toggleDescription {
    flex: 1;
  }

  .cr-row {
    align-items: center;
    border-top: var(--cr-separator-line);
    display: flex;
    min-height: var(--cr-section-min-height);
    padding: 0 var(--cr-section-padding);
  }
</style>
<div id="sidebar">
  <h1>WebUI Gallery</h1>
  <cr-menu-selector id="selector" selectable="a" selected-attribute="selected">
    <template is="dom-repeat" items="[[demos_]]">
      <a role="menuitem" href="[[item.path]]"
          class="cr-nav-menu-item">[[item.name]]</a>
    </template>
  </cr-menu-selector>

  <div class="cr-row">
    <span id="toggleDescription">Follow color pipeline</span>
    <cr-toggle aria-labeledby="toggleDescription"
        on-change="onFollowColorPipelineChange_">
    </cr-toggle>
  </div>
</div>

<iron-location path="{{path_}}"></iron-location>

<div id="main"></div>