Opportunity Standard

@nycopportunity/pattern-menu/src

<!--{ @id     Identifies the Menu for toggle targeting }-->
<!--{ @class  Add "o-menu-fixed" in production layouts }-->
<aside class="o-menu block" id="aria-c-menu">
  <div class="o-menu__wrap">
    <!--{ @data-js        "menu" Adds the toggling utility to close the menu }-->
    <!--{ @data-js-menu   "close" indicates that this is the primary closing button for the menu. Focus will shift from the open button to the close button when the menu is opened. }-->
    <!--{ @aria-controls  Targets the Menu ID for toggling }-->
    <!--{ @aria-expanded  Indicates the toggled state of the target }-->
    <!--{ @tabindex       Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
    <button aria-controls="aria-c-menu" aria-expanded="true" class="o-menu__nav-item" data-js="menu" data-js-menu="close" tabindex="-1">
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <svg aria-hidden="true" class="icon icon-ui" tabindex="-1">
        <use href="#lucide-x"></use>
      </svg>
      <span>Close</span>
    </button>
    <hr />
    <!--{ @data-js   "themes" Adds the theme toggling utility to the theme button }-->
    <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
    <button class="o-menu__nav-item" data-js="themes" tabindex="-1">
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <svg aria-hidden="true" class="icon icon-ui" tabindex="-1">
        <!--{ @data-js-themes  "icon" lets the theme toggling utility where change the theme icon }-->
        <use data-js-themes="icon" href="#lucide-sun"></use>
      </svg>
      <span class="sr-only">Toggle&nbsp;</span>
      <!--{ @data-js-themes  "label" lets the theme toggling utility where to change the theme text label }-->
      <span data-js-themes="label">Theme</span>
    </button>
    <hr />
    <!--{ @aria-label  Ensures landmarks are unique }-->
    <nav aria-label="Menu" class="o-menu__nav">
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <a class="o-menu__nav-item " href="#" tabindex="-1">Menu</a>
    </nav>
  </div>
</aside>

The Menu Pattern is an aside element that slides in from the end of the screen. It contains the Navigation items that do not fit within the Navigation Pattern in mobile viewports. It uses the Patterns Scripts toggle utility to achieve the showing and hiding effects. The animation for the sliding uses CSS and will be disabled by devices using the prefers-reduced-motion @media query.

The Menu element will be hidden from screen readers using the aria-hidden attribute, and potentially focusable children will have their tabindex attribute set to -1 when the Menu is hidden. When the Menu is open, the focus will shift from the “Menu” button to the “Close” button inside the Menu. After this event, the focus will be trapped, meaning the tabbing will cycle through elements within the Menu.

The opening “Menu” button must have the data-js-menu="open" attribute. The closing button must have the data-js-menu="close" attribute.

We recommended placing the Menu element inside the Navigation Pattern next to the Menu button.

We recommended placing the Close button in the Menu before the nav items.

Use the aria-label="Menu" attribute on the nav element inside the Menu distinguish the nav element from others.

The Menu below is displayed block for demonstration purposes. You must add the o-menu-fixed next to the o-menu class when you use this pattern in production.

Global Elements Demonstration

The following demonstration shows the Navigation, Menu, and Attribution global elements within the mobile viewport.

View the global elements demonstration at full screen.

Usage

The Menu may be used by either the global stylesheet or module import.

Global Stylesheet and JavaScript

The Menu will display correctly with the global stylesheet.

<link href="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/css/default.css" rel="stylesheet">

The Menu requires JavaScript for showing, hiding, and screen reader accessibility. To initialize the Menu instance from the global script use the following code:

<script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/js/default.js"></script>

<script>
  var Standard = new Default();

  Standard.menu();
</script>

This function will attach the Menu toggling event to the body of the document.

Stylesheet and JavaScript Module Import

The Menu includes two stylesheets. One sets the default design tokens using CSS Custom Properties, and another adds custom styles.

@forward '@nycopportunity/pattern-menu/src/tokens.css';
@forward '@nycopportunity/standard/objects/menu/_menu.scss';

The Menu JavaScript source exists in the Pattern Menu module, which is a dependency of the Opportunity Standard.

import Menu from '@nycopportunity/pattern-menu/src/menu';

new Menu();

Demonstration

Code

Global Stylesheet and JavaScript

Stylesheet and JavaScript Module Import