Navigation

The navigation component, commonly loacated at the top and left of each page, provides multiple links to allow users to easily navigate the site. This allows for the creation of a main (site-wide) navigation and sub (page) navigation.

Structural

All navigations consist of a wrapping <nav> element containing an unordered list (<ul>) of links. A nested unordered list of links creates a dropdown menu. 2 levels of dropdown menus are supported. If a parent link has a dropdown menu, a toggle dropdown button is included as its sibling, and uses a down-facing chevron icon. When the dropdown menu is toggled, the toggle button's icon rotates 180 degrees.

Main navigations also include a hamburger button, which is only visible on small/mobile viewports. When clicked, the main navigation is reveled on the left side of the viewport, and behaves more similarly to sub navigations.

Styles

All navigations support dark and light themes. A main navigation commonly uses the dark theme, and sub navigations commonly use the light theme.

The dark theme uses a near-black background color with increasingly brighter background colors for dropdown menus. The accent/highlight color is VCU gold.

The light theme uses a near-white background color with increasingly brighter background colors for dropdown menus. The accent/highlight color is the globally configured accent background color (default blue).

All navigations are hidden on small/mobile viewports, however the main navigation can still be toggled open via its hamburger button.

Sub navigations will restrict its vertical space by allowing its container to scroll vertically.

Functionality

All navigations support advanced keyboard navigation, including the use of arrow, home, and end keys. Which arrow keys are used depends on whether its a main or sub navigation, and intuitively corresponds with the direction of the link you're moving to. In addition, the indication of the current page's navigation link (and its parents) can be set even if its not explicitly indicated in the markup.

Main navigations allow for dropdown menus to be closed by pressing Escape or using arrow keys to move away from dropdown menus. Arrow navigation in dropdowns will loop through the dropdown menu links until closed.

Sub navigations that can be vertically scrolled will have scroll indicators (subtle shadows) that indicate which direction the nav can be scrolled in.

T4 implementation

The navigation is implemented in T4 as the "Navigation" Compass content type, meaning its classes retain the .cwf- prefix.

Areas

This content type should only be used within the global "Site-Header" (main navigation) or "Site-Nav" (sub navigation) sections to have it displayed globally within the header or left sidebar respectively.

Injectors

In the "Injectors" field of the navigation content type, the following injectors can be used:

• id:{custom_id} - Overrides the default, T4 ID of the navigation with a custom ID.
• class:{custom_classes} - Adds custom classes to the navigation.
• style:{custom_styles} - Adds custom styles to a style attribute of the navigation.
• before:{custom_html} - Adds custom HTML before the navigation.
• after:{custom_html} - Adds custom HTML after the navigation.