Opportunity Standard

@nycopportunity/pattern-navigation/src

<!--{ @aria-label  Use "Primary Navigation" to identify the nav as a unique and major landmark }-->
<!--{ @class       Add "o-navigation-fixed" can be added to production layouts to fix the navigation to the bottom of the screen for the mobile viewport }-->
<!--{ @data-js     "navigation" is used as a JavaScript element selector. It is primarily used to set get the client height of the element to add padding to the bottom of the body. This prevents the mobile view of the element from covering the bottom of the page. }-->
<nav aria-label="Primary Navigation" class="o-navigation " data-js="navigation">
  <a class="o-navigation__home o-navigation__menu-item" href="#">
    <svg class="o-navigation__svg" fill="none" height="26" role="img" viewBox="0 0 456 152" width="78" xmlns="http://www.w3.org/2000/svg">
      <title>New York City Logo</title>
      <path d="M446.505 66.3803L456 57.0104V28.5052L427.495 0H332.505L304 28.5052V9.51562L294.505 0H256.505L247.01 9.51562V28.5052L228 47.5156L209.01 28.5052V9.51562L199.495 0H161.495L152 9.51562L142.505 0H104.505L95.0104 9.51562V47.5156L47.4948 0H9.49479L0 9.51562V142.505L9.49479 152H47.4948L57.0104 142.505V104.505L104.505 152H142.505L152 142.505V66.5052L199.495 114V142.505L209.01 152H247.01L256.505 142.505V114L304 66.5052V123.516L332.505 152H427.495L456 123.516V95.0104L446.505 85.4948H398.99V95.0104H361.01V57.0104H398.99V66.3803H446.505Z" fill="currentColor"></path>
      <path d="M449.233 6.41315C450.128 6.41315 450.899 6.32986 450.899 5.28876C450.899 4.41424 450.045 4.31013 449.337 4.31013H447.9V6.41315H449.233ZM447.921 10.4942H446.734V3.31068H449.462C451.19 3.31068 452.085 3.91452 452.085 5.37205C452.085 6.68383 451.294 7.20438 450.211 7.32931L452.231 10.4942H450.899L449.045 7.4126H447.942V10.4942H447.921ZM449.191 1.41589C446.38 1.41589 444.194 3.62301 444.194 6.78794C444.194 9.74466 446.11 12.16 449.191 12.16C451.981 12.16 454.168 9.9737 454.168 6.78794C454.168 3.62301 451.981 1.41589 449.191 1.41589ZM449.191 13.2844C445.464 13.2844 442.799 10.4942 442.799 6.78794C442.799 2.87342 445.756 0.291504 449.191 0.291504C452.585 0.291504 455.542 2.87342 455.542 6.78794C455.563 10.6816 452.606 13.2844 449.191 13.2844Z" fill="currentColor"></path>
    </svg>
  </a>
  <!--{ View navigation link item }-->
  <a class="o-navigation__item " href="#">Navigation</a>
  <!--{ Search site feature item }-->
  <button aria-controls="aria-c-search" aria-expanded="false" class="o-navigation__item" data-js="search">
    <svg class="o-navigation__menu-icon icon-ui">
      <use href="#lucide-search"></use>
    </svg>
    <span class="o-navigation__menu-label">Search</span>
  </button>
  <!--{ Theme toggling site feature item }-->
  <button class="o-navigation__item" data-js="themes">
    <svg class="o-navigation__menu-icon icon-ui">
      <use data-js-themes="icon" href="#lucide-moon"></use>
    </svg>
    <span class="sr-only">Toggle&nbsp;</span>
    <span class="o-navigation__menu-label" data-js-themes="label">Theme</span>
  </button>
  <!--{ Language translation site feature item }-->
  <button aria-controls="aria-c-languages-dropdown" 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-ui">
      <use href="#nyco-languages"></use>
    </svg>
    <span class="o-navigation__menu-label">Languages</span>
  </button>
</nav>

The Navigation Pattern is a responsive nav element that contains the main links for accessing different views and button elements for site features (such as language translation). It uses responsive styling to appear as a three-button menu for small viewports. Possible button options include a homepage link (using an SVG logo), a translation button, or a mobile menu toggle. The menu is fixed to the bottom of the screen by default to assist with thumb reach.

On larger devices (tablets), the Navigation sticks to the top of the screen with the same three-button menu set displayed as inline links.

On extra large devices (desktop), the Navigation is statically positioned at the top of the page with the complete list of navigation items on display. Navigation items are only visible on desktop viewports.

It is recommended to use three to four items: the logo (home link), the language, search, and the menu buttons. You should display additional navigation items by clicking the menu button using the Menu Pattern.

Use the aria-label="Primary Navigation" attribute to distinguish the nav element from others.

The Navigation below is positioned statically for demonstration purposes. You must add the o-navigation-fixed next to the o-navigation class when you use this pattern in production.

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.

Usage

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.19/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.19/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.
  ]
});

Demonstration

Code

Global Stylesheet and JavaScript

Stylesheet and JavaScript Module Import