App Screen

Best Practice

For projects requiring a sidebar navigation the App Screen provides the basic user interface frame. It contains 5 parts. The bottom of this page will display the markup pattern after the 5 parts have been explained.

1. Page Wrapper, id=page-wrapper
2. Sidebar with Navigation, id=sidebar
3. Main Wrapper, id=wrapper-main
4. Topbar, id=wrapper-topbar
5. Main Content, id=main

Usage

Everything considered part of the App Screen is placed into the id=page-wrapper. This is out the outermost div. The Skip Link goes above it in markup. The Back to Top button goes below it in markup.

<a id="SkipToMain" class="skip-to-main" href="#main" tabindex="1">Skip to Main Content</a>

<div id="page-wrapper" class="page-wrapper agency-theme">
  ...
</div>
<a id="ScrollToTop" href="#main" class="btn btn-accent btn-sm btn-scroll-top">
  <span class="icon fas fa-arrow-up" aria-hidden="true"></span>
  <span>Page top</span>
</a>

Sidebar with Navigation

The first child element of the id=page-wrapper is the Sidebar with Navigation. This is the nav. For small devices like smartphones, it makes responsive adjustments. Add Top Level and Child Level items as needed.

• Used in the App Screen.
• Presents only two levels of navigation.
• Child pages should get the class active added to their class list, in both the li and a which hold the link when they’re being viewed.
• Current child pages also get the eye icon, when they’re being viewed. The same icon is used in Breadcrumbs to indicate the current page.
• Child items will only appear when they’re toggled by the button to the right of their parent link.
• The sidebar footer is empty by default but available for 1 or 2 short links

<nav id="sidebar" class="sidebar-wrapper" aria-label="sidebar">
  <div class="sidebar-content">
    <div class="sidebar-brand">
      <a href="#" class="me-auto" tabindex="4">Digital Product Name</a>
    </div>
    <div class="sidebar-menu text-white">
      <ul>
        <!-- this is a parent nav item without a child menu -->
        <li class="sidebar-item">
          <div class="sidebar-dropdown-header">
            <a class="sidebar-nav-item " href="#">
              <span>Nav Item</span>
            </a>
          </div>
        </li>
        <!-- this is a parent nav item with a child menu -->
        <li class="sidebar-item">
          <div class="sidebar-dropdown-header">
            <a class="sidebar-nav-item" href="#">
              <span>Nav Item with Child Items</span>
            </a>
            <button class="sidebar-dropdown-header-expand" aria-controls="ParentItem-01" aria-expanded="false">
              <span class="visually-hidden">Toggle Child Items</span>
              <span class="icon fas fa-fw fa-angle-right" aria-hidden="true"></span>
            </button>
          </div>
          <div class="sidebar-submenu" id="ParentItem-01">
            <ul>
              <li class="sidebar-item active">
                <a class="sidebar-nav-item active" href="#">
                  <span class="icon fas fa-fw fa-eye" aria-hidden="true"></span>
                  <span>Child Nav Item</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidebar-footer"></div>
</nav>

Wrapper Main and Page Content

After the nav is the class="wrapper-main" and class="page-content".

<div id="wrapper-main" class="wrapper-main">
  <div class="page-content">
    ...
  </div>
</div>

Topbar

The Topbar goes inside of the class="page-content". The Topbar contains a hamburger button to show and hide the Sidebar with Navigation and the current page title.

<!-- topbar -->
<div id="wrapper-topbar" class="wrapper-topbar bg-black text-white">
  <p class="m-0 fw-bold order-lg-2 me-auto">
    <a href="#" class="d-md-none text-white text-decoration-none" tabindex="2">
      <span class="d-md-none">Digital Product Name</span>
    </a>
    <span class="d-none d-md-inline">Current Page Title</span>
  </p>
  <button
    id="sidebar-button"
    class="btn btn-sm btn-black sidebar-button"
    aria-haspopup="true"
    aria-controls="sidebar"
    tabindex="3">
    <span class="icon fas fa-fw fa-bars" aria-hidden="true"></span>
    <span class="visually-hidden">Toggle side navigation</span>
  </button>
</div>
<!-- / topbar -->

Using Main Content

This main element is where the screen’s contents and user interface items are placed. This is also the target for the Skip Link.

<main id="main" class="main" role="main">
  ...
</main>

Putting It All Together

The App Screen markup below is how all the 5 parts are assembled.

<!-- skip to main -->
<a id="SkipToMain" class="skip-to-main" href="#main" tabindex="1">Skip to Main Content</a>

<!-- / skip to main -->
<!-- page content -->
<div id="page-wrapper" class="page-wrapper">
  <!-- sidebar menu -->
  <nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-brand">
        <a href="#" class="me-auto" tabindex="4">Digital Product Name</a>
      </div>
      <div class="sidebar-menu text-white">
        <ul>
          <li class="sidebar-item">
            <div class="sidebar-dropdown-header">
              <a class="sidebar-nav-item " href="#">
                <span>Top Level Nav Item</span>
              </a>
            </div>
          </li>
          <li class="sidebar-item">
            <div class="sidebar-dropdown-header">
              <a class="sidebar-nav-item" href="#">
                <span>Top Level Nav Item</span>
              </a>
              <a class="sidebar-dropdown-header-expand" href="javascript://" role="button">
                <span class="icon fas fa-fw fa-angle-right" aria-hidden="true"></span>
              </a>
            </div>
            <div class="sidebar-submenu">
              <ul>
                <li class="sidebar-item active">
                  <a class="sidebar-nav-item active" href="#">
                    <span class="icon fas fa-fw fa-eye me-1" aria-hidden="true"></span><span>Child Level Nav Item</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- sidebar-menu  -->
    </div>
    <!-- sidebar-content  -->
    <div class="sidebar-footer">
    </div>
  </nav>
  <!-- / sidebar menu -->
  <!-- page content wrapper -->
  <div id="wrapper-main" class="wrapper-main">
    <div class="page-content">
      <!-- topbar -->
      <div id="wrapper-topbar" class="wrapper-topbar">
        <p class="m-0 fw-bold order-lg-2 me-auto">
          <a href="#" class="d-md-none text-white text-decoration-none" tabindex="2">
            <span class="d-md-none">Digital Product Name</span>
            <span class="d-none d-md-inline">Current Page Title</span>
          </a>
        </p>
        <button id="sidebar-button" class="btn btn-sm btn-black sidebar-button" aria-haspopup="true" aria-controls="sidebar" tabindex="3">
          <span class="icon fas fa-fw fa-bars" aria-hidden="true"></span>
        </button>
      </div>
      <!-- / topbar -->
      <!-- main content -->
      <main id="main" class="main" role="main">

        <!-- All page content goes here -->

      </main>
      <!-- / main content -->
    </div>
  </div>
  <!-- / page content wrapper -->
</div>
<!-- / page content -->

<!-- back to top -->
<a id="ScrollToTop" href="#main" class="btn btn-ui btn-sm">
  <span class="icon fas fa-arrow-up" aria-hidden="true"></span>
  <span class="visually-hidden">Page Top</span>
</a>
<!-- / back to top -->