Navigation

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 Navigation may be used by either the global stylesheet or module import.

Global Stylesheet and JavaScript

The Navigation 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 Navigation requires JavaScript to set the --o-navigation-height property. This property is used by CSS utilities to add spacing, equal to the height of the navigation, at the bottom of the page to prevent it from covering up content. To initialize the property heights 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.setPropertyHeights();
</script>

This property can also be used to calculate layouts, such as the height of the main visible window.

<main style='min-height: var(--100vh); min-height: calc(var(--100vh) - var(--o-navigation-height))'>
  <!-- ... -->
</main>
Stylesheet and JavaScript Module Import

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

@forward '@nycopportunity/pattern-navigation/src/tokens.css';
@forward '@nycopportunity/standard/objects/navigation/_navigation.scss';

The Navigation JavaScript source uses the Patterns Scripts utility library to set the --o-navigation-height property, which is a dependency of the Opportunity Standard. This method allows the specification of multiple properties and element heights.

import SetHeightProperties from '@nycopportunity/pttrn-scripts/src/set-height-properties/set-height-properties';

new SetHeightProperties({
  'elements': [
    {
      'selector': '[data-js="navigation"]',
      'property': '--o-navigation-height'
    }
    // Additional elements and properties can be specified here as objects including the selector and propert attributes.
  ]
});