Navigation

A navigation is the hierarchical structure of links to key sections and content within the site or app's information architecture. It is consistently displayed across all pages of the site (typically within the site header/banner).

Within CDS, navigations can take on many appearances by default. It is displayed in conjunction with the banner of the site.

The ids provided within the code examples are required as is. Most of the functionality requires Javascript to work.

Sources

CSS
css/base.css
SCSS
sass/base/_layout.scss
sass/ui/_megamenu.scss
JS
js/cds_menus.js
js/cds.js

Code

Important: This component MUST be placed in the <header> tag to utilize all of the options.

The main navigation that will be on every single page, within the banner of the site.

Refer to Header for details on placement.

<nav id="main-navigation" class="navbar {navbar-fill} {navbar-position} {navbar-arrangement} {navbar-size} {navbar-current-item} {navbar-dropdown} {navbar-dropdown-demand} {navbar-dropdown-megamenu} {navbar-megamenu} {mobile-animation}" aria-label="Main">
    <div class="container">
        <a id="mobile-home" href="#"><span class="sr-only">Home</span></a>
        <button id="mobile-close"><span class="sr-only">Close menu</span></button>
        <ul>
            <!-- Navigation Items -->
        </ul>
    </div>
</nav>
Main navigation visual demonstration

Main Navigation

Visual demonstration of the main navigation.

Mobile Navigation

Visual demonstration of the mobile main navigation.

Utility Navigation Wrapper

Occupies space next to the search toggle. This is for links that are important for quick access, but shouldn't take space in the main navigation. For instance, a 'Contact Us' page, 'FAQ' page, or 'Donate' link.

On mobile, the navigation items here will be in a "Pages for..." dropdown.

Refer to Header for details on placement.

<nav id="utility-navigation" class="navbar {navbar-fill} {navbar-position} {navbar-size} {navbar-current-item} {navbar-accent} {navbar-dropdown} {navbar-dropdown-demand} {mobile-animation}" data-custom-label="insert mobile nav label">
    <div class="container">
        <div class="logo">
            <a href="https://www.cornell.edu"><img src="/path/to/45px/cornell/logo" alt="Cornell University" width="183" height="41"></a>
        </div>
        <!-- Navigation Items -->
    </div>
</nav>
Utility Navigation Wrapper visual example Visual demonstration of the utility navigation.

Alternative Navigation Wrapper

A navigation can be positioned elsewhere aside from the main navigation or utility navigation. If this is done, the navigation landmarks must be uniquely named with ARIA.

<div class="expander-content">
    <nav class="navbar {navbar-fill} {navbar-position} {navbar-size} {navbar-current-item} {navbar-dropdown} {navbar-dropdown-demand} {navbar-dropdown-megamenu} {mobile-animation}" aria-label="Unique Navigation Name">
        <div class="container">
            <!-- Navigation Items -->
        </div>
    </nav>
</div>
Alternative Navigation Wrapper visual example Visual demonstration of the alternative navigation.

Current Page

To utilize the CDS styles for a "current" or "active" page within the navigation if you are not using WordPress or Drupal, apply the classes of .current_page_item / .current_page_ancestor or menu-item--active-trail on the <li> tag of the "current" page within the navigation and relevant ancestor menu items.

No action is required within WordPress or Drupal as long as you are using the respective default menus in either CMS.

Classes

Required. jQuery and CSS use the .navbar class to target the parent element for scripting purposes.

Enables the background color of the navigation.

Class Background Color
Default Transparent
.fill #ededed
.fill.dark #2b2b2b and sets the text color to #ffffff.
.fill.dark.red #b31b1b and sets the text color to #ffffff.
.fill-gradient Must have the class of .dark or .photo applied to the header tag to work. If applied within the context of the main .cu-header, it will create a semi-transparent black gradient from left to right, most opaque in the middle.

Determines the position of the child elements of the navbar container. The navbar class implements a display: flex;. All elements are aligned in the center vertically (on the cross-axis).

Class Style
Default / Left The child elements will be aligned to the left. No spacing between any element.
.nav-right Recommended setting for the Utility Navigation. The child elements will be aligned to the right. No spacing between any element. (CSS: justify-content: flex-end;)
.nav-center The child elements will be aligned in the center. No spacing between any element. (CSS: justify-content: center;)
.nav-even Recommended setting for the Main Navigation. The child elements will be spaced evenly apart within the container. The space between the edge of the container and the first and last child elements will be the same.
.nav-around The child elements will be spaced evenly apart within the container. The space between the edge of the container and the first and last child elements will be half that of the space between each child element.
.nav-between The child elements will be spaced evenly apart within the container. The space between the edge of the container and the first and last child elements will be 0. (CSS: justify-content: space-between;)
Navbar Position visual demonstrations

Default

Visual demonstration of default alignment.

nav-right

Visual demonstration of right alignment.

nav-center

Visual demonstration of center alignment.

nav-even

Visual demonstration of even alignment.

nav-around

Visual demonstration of around alignment.

nav-between

Visual demonstration of between alignment.

Changes whether the navbar child elements are displayed horizontally or vertically.

Class Style
Default The navbar's child elements are arranged horizontally in a line. Unless the navigation is in a sidebar, use the default for arrangement.
.vertical The navbar's child elements are arranged vertically stacked, and each child element covers 100% of the width of the container. Only use with a navigation within a sidebar.

Changes the height of the navigation container.

Class Style
Default The navbar child elements will have a minimum height of 2.625em. (Equivalent to 47.25px with the default 18px font size for navbars.) The child elements will take up the full height of the navbar.
.navbar-tall The navbar child elements will have a minimum height of 3.375em. (Equivalent to 60.75px with the default 18px font size for navbars.) The navbar child elements will have space between the top and bottom of the navbar. Note that this spacing is not padding or margin, only a vertically centered list within the navbar container.
Navbar size Visual Demonstration

Default

Visual demonstration of default navbar size.

navbar-tall

Visual demonstration of a tall navbar.

Changes the appearance of the link in the navigation corresponding to the current page the user is on. Supports Drupal & Wordpress natively. Refer to Current Page for details.

Class Style
Default The link in the navigation corresponding to the current page the user is on will have a minor tint or shadow (depending on if the .dark class is set).
.active-red The link in the navigation corresponding to the current page the user is on will have a carnelian (#b31b1b) background.
Navbar Current Item visual demonstration

Default

Visual demonstration of a current menu item.

active-red

Visual demonstration of a red current menu item.

Changes the appearance of the hovered or focused item.

Class Style
Default The hovered or focused links will have a tint or shadow (depending on if the .dark class is set).
.accent-red The hovered or focused links will have a carnelian (#b31b1b) background.

Adds support for dropdown functionality to the navigation in the mobile/narrow width display, as well as improved keyboard and screen reader navigation.

Class Function
Default (Not Recommended) On larger devices, there is always support for hover and focus state dropdowns on any navigation bar with class .navbar applied to it. The navbar items will display a + next to the items with children elements. On mobile devices, there will be no dropdown option for users even if there are child list item elements.
.dropdown-menu Requires Javascript to be enabled. On all devices, the dropdown menu will support a dropdown for all navigation elements with child list items. Keyboard users will be able to navigate menus using arrow keys instead of just the Tab key.
This also will add the .scripted class to the navigation, and all of the necessary classes to the <li> elements regarding their place in the navigation hierarchy.

Changes the navigation such that dropdown/collapsed menu items are not accessible to keyboard users or screen readers until manually invoked.

Class Function
Default Using the Tab key, the user can navigate throughout every navigation element in sequential order, and the tab order will automatically open dropdown menus.
.dropdown-menu-on-demand Requires Javascript to be enabled. Using the Tab key, the user can navigate through the same level of navigation. To enter the lower level navigation, the user will manually enter it using an arrow key. Screen reader users will also be given a text instruction relaying the expected behavior.

Controls whether the dropdowns for an element become a megamenu instead of a menu. May require additional custom code to operate.

Class Function
Default The navigation dropdown will be presented as a single nested list.
.dropdown-megamenu The navigation dropdown will become a megamenu style. By default, this will organize menus so that top-level items are displayed on their own, with their first-level dropdown links beneath each link slightly offset.

Megamenus may also support "Features," which are panels of content similar to a Call to Action block. This requires custom code on the part of the developer to implement, as neither WordPress nor Drupal offers a native way to accomplish this.

To use a megamenu feature, add .menu-feature to the last <li> tag of the top-level <ul> tag. Within that, add <div class="feature-content"> ... </div> and add your content there. It supports an image, a Heading 2, and inline paragraph text by default.

{mobile-animation}

Controls if the navigation dropdowns within the mobile navigation are animated or not.

Class Style
Default The navigation elements do not have any animation. They will expand and collapse by popping in and out instantly.
.animate The mobile navigation has a linear slide effect when used.
.animate.slide-down The mobile navigation will have an ease-in-out slide effect when used.

Accessibility Expectations

Modality Expected Behavior Success Criterion
All The order of links in a navigation that is repeated on multiple pages in a set (in this context, every page where the main navigation is present) must be in the same relative order. 3.2.3
Keyboard Keyboard users must not be forced to navigate through drop down menus in order to access the link they want to interact with. (They must be given the option to choose when they want to interact with a drop down) 2.1.1
Keyboard If a keyboard user opens up a navigation that appears in a modal, keyboard focus must move to the navigation when opened. 2.4.3
Keyboard If a dropdown appears on hover or focus, it must be dismissable with the ESC key. Keyboard focus must return to the triggering element. 1.4.13
Keyboard If the navigation overlaps other content, it must disappear or otherwise not obscure any content that has keyboard focus. 2.4.11
Keyboard Keyboard users must be able to interact with all elements in the navigation. 2.1.1
Keyboard, Motor If a dropdown appears on hover or focus, it must remain persistent while hover or focus remains on the triggering element and the dropdown. 1.4.13
Motor Navigations must not rely on gesture based inputs to open, close, or perform any other function. 2.5.1
Motor Any functionality must only trigger on the keyup or mouseup event, unless the action can be undone. 2.5.2
Motor Navigations may not rely on motion to activate or interact. 2.5.4
Screen Reader If there are multiple navigation landmarks on the same page, they require unique accessible names. (Using aria-label/aria-labelledby) 1.3.1
Screen Reader If an element opens up a dropdown, it must support the aria-expanded attribute. 4.1.2
Screen Reader If an element opens up the navigation in a modal, it must have the aria-haspopup attribute. 4.1.2
Screen Reader Buttons must be used to expand, collapse, show, or hide parts of a navigation. 4.1.2
Visual Color alone may not be used to present information about a link without a 3:1 contrast ratio. (Such as a “current page” indicator) 1.4.1
Visual All text must have appropriate color contrast in all states (regular, focus, hover etc…) 1.4.3
Visual Links must always have focus indicators when given focus. 2.4.7