Menu

Global Elements Demonstration Anchor Link 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.

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();