HRA global navigation

[LibbyUX]

Ready for dev: New HRA global navigation

Moving forward, all applications and websites will be connected with a single navigation component. This design system update will keep us aligned across all pages and apps in the HRA.

• For users, this component delivers a consistent user experience across all HRA UIs.
• For the product team, this new global nav header design symbolizes a maturing design system. This will help reduce nav header and nav menu component variants between our products. I will submit deprecated component removal requests as needed.

Please reach out to me if you have any questions about our most important component! Looking forward to collaborating and seeing it through together!

Workflow organization

Please implement first before working on this component:

• Add new social logo icons #813
• Update icon button with new variations #814

Figma resources

• HRA Portal Y3: Global Navigation sheet
• Design System Repository
  • NEW: Navigation menus
  • UPDATED: Nav headers
• HRA Components
  • Nav Header
  • Nav Menus

Cosmetic updates

Please inspect the new nav header for updated:

• Color: Fill opacity
• Effects: Drop shadow & background blur
• Padding
• Logo usage
• Min widths

Behavior

• The nav header is always visible and stays at the top of the page while users scroll.
• A secondary menu layer with breadcrumbs has been added for apps with "home pages" (FTU explorer, ASCT+B reporter, CDE) to unify global navigation or pages deep within our website.
• Only one menu category may be opened at a time for all variations
• Nav menu flyout/overlay buttons do not have hover or pressed states. Use the whole button component as the click/press target.

Breakpoint guidance: Nav header & menu interaction

• Desktop devices or at 640px and above:
  • Users receive a flyout menu under the navigation option
  • All navigation categories visible at all times
• Mobile devices or at 639px and below:
  • All categories are consolidated into one hamburger menu icon button
  • When the menu icon button is pressed, users receive a sidenav/overlay using the full width and length of the screen
  • Please implement however to make it look/feel best and reach out to me with questions

Menu button routes

• Please use all routes directly from the approved HRA Global Navigation sheet