Skip to content

Mobile Menu

The mobile menu component provides a slide-out sidebar menu that provides deep-nesting navigation. The top levels function as expandable accordions to allow for quickly digging into the content, and deeper nester menus slide to the slide to allow multilevel deep navigation without the need to reload the page.

This component requires Drupal to function, hence the examples here are not interactive.

Examples and Code

Select example

Open Full Example

<div class="uoheader__mobile">
  <button class="uowdf-mobile-menu__button__new" id="uowdf-mobile-menu__button" aria-label="Navigation" aria-expanded="false" aria-haspopup="true" aria-controls="uobanner-sidebar">
    <div class="uowdf-mobile-menu__button__new-bar-1"></div>
    <div class="uowdf-mobile-menu__button__new-bar-2"></div>
    <div class="uowdf-mobile-menu__button__new-bar-3"></div>
    <div class="uowdf-mobile-menu__button__text">Menu</div>
  </button>
</div>
<div class="uowdf-mobile-menu__container" tabindex="-1" inert="" aria-hidden="true">
  <div class="uowdf-mobile-menu" id="uowdf-mobile-menu" data-menu-id="0" style="--current-depth: -1">
    <h2 class="uowdf-mobile-menu__title">Office of the Provost Menu</h2>
    <nav class="uowdf-mobile-menu__menu uowdf-mobile-menu--accordions" role="none">
      <ul class="uowdf-mobile-menu__list" id="uowdf-mobile-menu__list" role="none">
        <li class="uowdf-mobile-menu__list-item">
          <a href="/about-otp" class="uowdf-mobile-menu__link uowdf-mobile-menu__link--leaf"
            data-drupal-link-system-path="node/2573">About Us</a>
        </li>
        <li class="uowdf-mobile-menu__list-item">
          <a href="/academic-excellence" class="uowdf-mobile-menu__link uowdf-mobile-menu__link--leaf"
            data-drupal-link-system-path="node/2465">Academic Excellence</a>
        </li>
        <li class="uowdf-mobile-menu__list-item has-submenu is-leaflet">
          <button class="uowdf-mobile-menu__accordion-button uowdf-mobile-menu__accordion-button--expanded"
            data-depth="0" aria-label="Awards Menu" aria-expanded="true"
            aria-controls="uowdf-mobile-menu__accordion-submenu--0">Awards</button>
          <div class="uowdf-mobile-menu__submenu" data-menu-id="3" data-parent-menu-id="0"
            style="display: block; max-height: none;" id="uowdf-mobile-menu__accordion-submenu--0" role="none">
            <ul class="uowdf-mobile-menu__list" role="none">
              <li class="uowdf-mobile-menu__list-item">
                <a href="https://provost.uoregon.edu/awards" class="uowdf-mobile-menu__link">Awards Overview</a>
              </li>
              <li class="uowdf-mobile-menu__list-item">
                <button class="uowdf-mobile-menu__accordion-button uowdf-mobile-menu__accordion-button--expanded"
                  data-depth="1" aria-label="Distinguished Teaching Awards Menu" aria-expanded="true"
                  aria-controls="uowdf-mobile-menu__accordion-submenu--1">Distinguished Teaching Awards</button>
                <div class="uowdf-mobile-menu__submenu" data-menu-id="34" data-parent-menu-id="3"
                  style="display: block; max-height: none;" id="uowdf-mobile-menu__accordion-submenu--1" role="none">
                  <ul class="uowdf-mobile-menu__list uowdf-mobile-menu--depth-2" role="none">
                    <li class="uowdf-mobile-menu__list-item">
                      <a href="/distinguished-teaching-awards" class="uowdf-mobile-menu__link"
                        data-drupal-link-system-path="node/57">Distinguished Teaching Awards Overview</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="uowdf-mobile-menu__list-item">
                <button class="uowdf-mobile-menu__accordion-button uowdf-mobile-menu__accordion-button--expanded"
                  data-depth="1" aria-label="Williams Fund Menu" aria-expanded="true"
                  aria-controls="uowdf-mobile-menu__accordion-submenu--2">Williams Fund</button>
                <div class="uowdf-mobile-menu__submenu" data-menu-id="35" data-parent-menu-id="3"
                  style="display: block; max-height: none;" id="uowdf-mobile-menu__accordion-submenu--2" role="none">
                  <ul class="uowdf-mobile-menu__list uowdf-mobile-menu--depth-2" role="none">
                    <li class="uowdf-mobile-menu__list-item">
                      <a href="/williams-fund" class="uowdf-mobile-menu__link"
                        data-drupal-link-system-path="node/250">Williams Fund Overview</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>

Guidance

Usage Guidance

Use mobile menus for primary and secondary navigation

Accessibility Guidance

Use Correct Heading Levels: Ensure the correct heading level is set in the sidebar. By default it will toggle to an H1 on opening since the rest of the page will be obscured, including the main page title.

Elements

Element	Description	Usage	Required	Multiple
Open/Close Button	The button to open the mobile menu	Put in the top right corner of your page	Yes	No
Menu	The parent menu element		Yes	No
Title	The navigation title	A few words clearly defining what content the user is navigating	Yes	No
Parent Menu Button	Expands child menu items of a parent	Provide the button to toggle the list	No	Yes
List	Each section of pages	Nest these for multilevel navigation	Yes	Yes
Item	A menu item	Use for each page in the navigation	Yes	Yes
Back Button	Returns to a less nested menu section	Provide on nested levels 3+	No	Yes

Attributes

Attribute	Element	Description	Usage	Required
data-depth	Parent Menu Button	The menu depth	Start at 0, increment by one for each nested menu	Yes
data-menu-id	List	A unique id for the menu	Use a unique integer ID for each menu in the tree	Yes
data-parent-menu-id	List	The parent menu’s ID	Set to the `data-menu-id` of the parent containing menu, omit if no parent	No

Aria Labels

Aria Label	Description
`aria-expanded`	Added to the `button` element of the mobile menu. Set to `true` on the button element when the menu is open. Set to `false` when the menu is closed.
`aria-modal`	Added to the `menu` element of the mobile menu. Set to `true` on the menu element when the menu is open. Set to `false` when the menu is closed.
`aria-label`	Added to Back Buttons, make this a clear behavior like: “Back to Parent Section Name”

Key Command	Description
`enter` or `space`	Open or close the mobile menu when focus is on the button element
`tab` or `shift`+`tab`	Navigate through the elements in the menu
`enter` or `space`	Open or close the accordion or nested menu section when focus is on the parent menu item button
`esc`	Close the mobile menu when it is open