App

The App component is really a collection of related components that, together, form the global layout of the page. They define the style and size of the global header, main content, and optional sidebar areas.

App Root

The root element of your application should have the class app. Everything else will go inside this container.

Here is one example of a typical App Root:

<html>
  <head>
    ...
  </head>
  <body class="app">
    ...
  </body>
</html>

Another valid option (e.g., for a react SPA) would be something like this:

<html>
  <head>
    ...
  </head>
  <body>
    <div id="root" class="app"></div>
  </body>
</html>

Most applications will have a header. The App Header should be an immediate child of the App Root.

The App Header will always have the following structure:

<header class="app-header">
  <div class="app-header-content">
    <!-- 0 or more of the following: -->
    <div class="app-header-section">
      <!-- 0 or more of the following: -->
      <div class="app-header-item"></div>
    </div>
  </div>
</header>

Note that, up to this point, the tag names can vary, but you should stick to the classes used above.

If you have an App Sidebar (see below), you’ll also want to add a toggle button to the end of the header. This allows the user to show/hide the sidebar when the screen isn’t wide enough to fit both the sidebar and the content. The toggle will automatically disappear when the screen is wide enough.

<div class="app-header-section">
  <label class="app-header-item app-sidebar-toggle">
    <input type="checkbox" title="Toggle navigation" />
    <div></div>
    <div></div>
    <div></div>
  </label>
</div>

Unlike the other code samples here, both the tag names and classes for the toggle button should be copied verbatim.

App Body

All Apps will have a body. Note that this is different from the document body tag; the App Body holds all content under the App Header.

The App Body will always have the following structure:

<div class="app-body">
  <!-- Optional -->
  <nav class="app-sidebar">...</nav>
  <!-- Required; id is needed if you're using the Skip Link component -->
  <main id="main-content" class="app-content">...</main>
</div>

As with the header, the tag names can vary, but you should stick to the classes used above.

Apps with many navigation items or a complicated hierarchy can use a sidebar to de-clutter the header area.

If you choose to use a sidebar, it should be an immediate child of the App Body.

The sidebar will always have the following structure:

<nav class="app-sidebar">
  <!-- One or more of the following -->
  <section class="app-sidebar-section">
    <h1 class="app-sidebar-heading">Heading</h1>
    <a class="app-sidebar-item" aria-current="page"
      >Current Page</a
    >
    <a class="app-sidebar-item">Other Page</a>
  </section>
</nav>

Note that the tag names can vary, but you should stick to the classes used above.

App Content

Lastly, all Apps will have a content area. This is where the shell of the App ends and the actual content begins. If you don’t have a sidebar, the App Content will be the only child of the App Body. Otherwise, it should go after the sidebar.

Typically, the App Content will be a <main> element.

If you’re using a Skip Link, it should have an id matching the href of the Skip Link.

Here’s an example of a typical App Content:

<main id="main-content" class="app-content">
  <h1>Page Title</h1>
  <p>Page content.</p>
</main>