Header

Preview Code

375 768 Full

Open

html

<!-- The toggle opens a sidebar from anywhere on the page; it shows under 48rem, or while the sidebar is closed. -->
<header class="aparte-app-header">
  <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle><aparte-icon name="menu"></aparte-icon></button>
  <span class="aparte-app-header__title">Deploy checklist</span>
  <div class="aparte-app-header__actions">
    <span class="aparte-tag">Large</span>
    <button class="aparte-btn aparte-btn--sm aparte-btn--ghost" type="button">Share</button>
  </div>
</header>

.aparte-app-header is a recipe: a header has no behaviour of its own. It holds three things. A toggle for the sidebar, which needs no script because <aparte-sidebar> listens for any control carrying data-aparte-sidebar-toggle. The conversation’s title. And an actions zone pushed to the end, for a model name, a share button, whatever the page needs.

The toggle shows only when it is useful: under 48rem of window, where the sidebar is a drawer, and at any width while the sidebar is closed, since it is then the one control that can bring it back.

Variants

Inside a chat

Preview Code

375 768 Full

Open

html

<!-- With a viewport inside, the tag uses your children as they are, in DOM order: here a
     header row, the transcript, and a composer with a toolbar. -->
<aparte-chat style="height: 26rem">
  <header class="aparte-app-header">
    <span class="aparte-app-header__title">Release assistant</span>
    <span class="aparte-badge aparte-badge--soft aparte-badge--sm">beta</span>
  </header>
  <aparte-chat-viewport></aparte-chat-viewport>
  <aparte-composer placeholder="Ask about the release…">
    <div class="aparte-composer-shell">
      <div class="aparte-composer-row">
        <aparte-composer-input></aparte-composer-input>
        <aparte-composer-send></aparte-composer-send>
      </div>
    </div>
  </aparte-composer>
</aparte-chat>

The same header can sit inside <aparte-chat>, above the transcript, when there is no page around the chat to hold it.

Usage

html

<header class="aparte-app-header">
  <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button"
          aria-label="Toggle the sidebar" data-aparte-sidebar-toggle>
    <aparte-icon name="menu"></aparte-icon>
  </button>
  <span class="aparte-app-header__title">Deploy checklist</span>
  <div class="aparte-app-header__actions">…</div>
</header>

In an app shell, it takes the top of the second column. A toggle aimed at one sidebar among several names it: data-aparte-sidebar-toggle="history".

Classes

.aparte-app-header · .aparte-app-header__actions · .aparte-app-header__title · .aparte-app-header__toggle

Accessibility

• The toggle is an icon button: give it an aria-label. The sidebar keeps its aria-expanded and aria-controls in step with the state, whoever opened or closed it.
• A <header> element makes the bar a banner landmark.

Related

• App shell — the grid the header sits in.
• Sidebar — what the toggle opens.
• Model selector — one thing the actions zone can hold.