UX Navigation - NCIOCPL/cgov-digital-platform GitHub Wiki

Overview

The Site Sections Vocabulary defines the structure of the web site. It drives the UX for:

  • Breadcrumb
  • Section Navigation (left bar on desktop, "tongue" on mobile)
  • The Main Navigation
    • including what to display in the mega menu pane, which is just free-form HTML
  • The Mobile Navigation

There are some common rules for displaying these elements, and of course, more specific rules for each type.

Data Model Cliff Notes

Common Rules/Information

As a general rule the navigation structures are contextually displayed based on the page you are viewing. This ranges from highlighting an element in the nav, to choosing the correct section nav to display.

Main Nav

  1. If main nav is true, draw the child sections that follow the section nav rules
  2. IF "show in main nav" is true, show that in the black bar
  3. On hover, if mega menu contents exists for the section nav that is being displayed in the main nav, then display the mega menu contents

Section Nav

  1. If a section does not have a landing page the section nav does not display
  2. If a section is "show in nav" is false, it is treated as no landing (except breadcrumbs)
  3. This draws itself and its children
  4. If a section is not published, do not display

Breadcrumbs

  1. Breadcrumbs can display an unlimited number of breadcrumbs (with the exception of rule #2)
  2. If a section does not have a landing page the breadcrumb does not display
    • Additional Breadcrumb exception: you also stop drawing that branch of the tree
⚠️ **GitHub.com Fallback** ⚠️