As of January 3rd, 2023 the Working NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Menu
The Mobile Menu Object contains the links and button elements for navigating different views and features that do not fit within the Navigation Object on mobile devices.
Demonstration
Markup
<!--{ @id Identifies the Mobile Menu for toggling }--> <!--{ @class Add "o-menu-fixed" in production layouts }--> <aside class="o-menu grid" id="aria-c-menu"> <button class="flex items-center justify-self-end mb-auto" data-js="themes"> <svg class="icon-wnyc-ui"> <use data-js-themes="icon" href="#feather-sun"></use> </svg> <span data-js-themes="label">Theme</span> </button> <div class="mb-auto"> <!--{ @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="https://cityofnewyork.github.io/working-nyc-patterns/demos/index">Home</a> <a class="o-menu__nav-item" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/programs/index">Programs</a> <a class="o-menu__nav-item" href="#">Opportunities</a> <a class="o-menu__nav-item" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/newsletter">Newsletter</a> </nav> <!--{ @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 Mobile 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 flex items-center" data-js="menu" data-js-menu="close"> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <svg aria-hidden="true" class="icon-wnyc-ui"> <use href="#feather-x"></use> </svg> <span>Close</span> </button> </div> </aside>