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.
Navigation
The Navigation Object contains the main link and button elements for navigating different views and features.
Demonstration
Markup
<!--{ @role Use role='navigation' in production layouts. Identifies the nav as a major landmark }--> <!--{ @aria-label Ensures a unique landmark }--> <!--{ @class Add "o-navigation-fixed" in production layouts }--> <nav aria-label="Navigation" class="o-navigation bg-scale-2 " data-js="navigation" role="navigation"> <a class="o-navigation__logo o-navigation__menu-item bg-scale-1 tablet:bg-transparent tablet:p-0" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/index"> <span class="sr-only">Working N Y C</span> <svg aria-hidden="true" class="hidden tablet:inline icon-logo-standard-menu-item fill-text text-brand"> <use href="#logo-wnyc-standard"></use> </svg> <svg aria-hidden="true" class="tablet:hidden icon-logo-stacked-menu-item fill-text text-brand"> <use href="#logo-wnyc-stacked"></use> </svg> </a> <a class="o-navigation__item" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/programs/index">Programs</a> <a class="o-navigation__item" href="#">Opportunities</a> <a class="o-navigation__item" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/newsletter">Newsletter</a> <button class="o-navigation__item" data-js="themes"> <svg class="o-navigation__menu-icon icon-wnyc-ui"> <use data-js-themes="icon" href="#feather-sun"></use> </svg> <span class="o-navigation__menu-label" data-js-themes="label">Theme</span> </button> <button aria-controls="aria-c-text-controller" aria-expanded="false" class="o-navigation__menu-item desktop:m-0" data-dialog="open" data-dialog-lock="true" data-js="dialog"> <svg class="o-navigation__menu-icon icon-wnyc-ui"> <use href="#icon-wnyc-translate"></use> </svg> <span class="o-navigation__menu-label">Translate</span> </button> <button aria-controls="aria-c-menu" aria-expanded="false" class="o-navigation__menu-item desktop:hidden mie-0" data-js="menu" data-js-menu="open"> <svg class="o-navigation__menu-icon icon-wnyc-ui"> <use href="#feather-menu"></use> </svg> <span class="o-navigation__menu-label">Menu</span> </button> </nav>