Skip to main content

Patterns

Navigation

The Navigation Object is a custom module with specific classes to define its elements, including the logo and nav. When a user is in a section of ACCESS NYC, the navigation item for that section gets a bolder type treatment. The Home page of ACCESS NYC features a larger logo size than the inner pages.

<nav class="o-navigation color-dark-background">
  <div class="logo-access"><a href="/"><svg class="icon icon-logo-full">
        <use xlink:href="#icon-logo-full"></use>
      </svg><span class="sr-only">Access NYC</span></a></div>
  <nav class="o-navigation__nav nav-inline text-align-end"><a class="screen-desktop:hidden" href="#o-mobile-nav">Menu</a><a class="hidden screen-desktop:inline-block active" href="#">Am I eligible?</a><a class="hidden screen-desktop:inline-block" href="#">Programs</a><a class="hidden screen-desktop:inline-block" href="#">Find help</a><a class="td-inherit o-navigation__search" href="#search"><svg aria-hidden="true" class="icon icon-ui-search">
        <use xlink:href="#icon-ui-search"></use>
      </svg>Search</a></nav>
</nav>
<div class="o-mobile-nav color-mid-background active:o-mobile-nav" data-sketch-symbol-instance="objects/mobile-nav/mobile-nav" id="o-mobile-nav"><a class="o-mobile-nav__close js-hide-nav" href="#o-mobile-nav">close &amp; return to site<svg aria-hidden="true" class="icon icon-close">
      <use xlink:href="#icon-close"></use>
    </svg></a>
  <div class="o-mobile-nav__inner">
    <h4 class="o-mobile-nav__header">Get help now</h4>
    <nav class="nav-block"><a class="active" href="#">Am I eligible?</a><a href="#">Programs</a><a href="#">Find help</a><a class="td-inherit" href="#search"><svg class="icon icon-ui-search">
          <use xlink:href="#icon-ui-search"></use>
        </svg>Search</a></nav>
  </div>
</div>