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. ```html ``` 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: ```html ``` This property can also be used to calculate layouts, such as the height of the main visible window. ```html

``` ##### 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. ```scss @forward '@nycopportunity/pattern-navigation/src/tokens.css'; @forward '{{ this.package.name }}/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 {{ this.package.nice }}. This method allows the specification of multiple properties and element heights. ```javascript 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. ] }); ```