Drawer Navigation

The High Velocity front-end app uses client-side drawer navigation (also called a "hamburger menu") in mobile viewports and its reduced layout. This maximizes the screen space and keeps user focus on page content.

The High Velocity front-end app's HamburgerNavigation component uses these more atomic components to structure and style the navigation. It requires a navigation tree made up of NavigationMenuItem nodes. There are 12 components available in the hv-ui hamburger-menu package:

• NavigationMenu: the menu context provider
• HamburgerMenu: the primary menu component that sets the contenxt values
• HamburgerMenuContent: the menu's content wrapper as an unordered list
• HamburgerMenuTitle: displays the site logo, current level heading and close button
• HamburgerMenuItemText: renders the current level heading in the HamburgerMenuTitle component
• HamburgerMenuButton: the hamburger menu icon button in the header that opens the navigation
• HamburgerMenuBackButton: renders a control so users can go to a previous menu pane
• HamburgerMenuLink: renders a final navigation node as a link to route a user to a category
• HamburgerMenuNextLevelButton: renders a control so users can open a child pane
• HamburgerMenuChildren: helper component that renders next level links and buttons as list items
• HamburgerMenuCurrentItem: exposes the current level to its child components
• HamburgerMenuViewAll: renders a navigation link in mid-level categories

Hamburger Menu Context Provider

The HamburgerMenuContext component keeps track of navigation levels and provides context to the child components.

Property	Description	Type
currentLevel	The current level	Number
parentItem	The current level's parent (optional)	NavigationMenuItem
menuItem	The current menu level (optional)	NavigationMenuItem
setLevel	State hook to set the current level	Number
onSelectMenuItem	Handles user selection of child item	Function
onSelectParentItem	Handles user selection of parent item	Function
onClose	Handles user close event	Function
backButtonRef	Reference to the back or parent button	React.RefObject<HTMLAnchorElement>
categoryItemRef	Reference to the category	React.RefObject<HTMLAnchorElement>
menuItemLinkRef	Reference to the subcategory	React.RefObject<HTMLAnchorElement>

Hamburger Menu

The HamburgerMenu component is a custom Sheet component. Its type extends HTMLButtonElement and Sheet provided by Radix's react-dialog. In addition to the button and sheet properties, it has:

Property	Description	Type
rootItem	The current level's parent (optional)	NavigationMenuItem
closeTitle	Localized close text	String

The HamburgerMenu uses and sets the values in the HamburgerMenuContext. It keeps track of the drawer's open state and sets the localized aria labels.

Hamburger Menu Content

The HamburgerMenuContent component is a wrapper that renders the main content of a pane in a <ul> element. It is an extenstion of the type HTMLUListElement and its styles can be overridden by passing in a className property.

import { HamburgerMenuContent } from '@hv/ui/hamburger-menu';

<HamburgerMenuContent>
  <>// ...menu content</>
</HamburgerMenuContent>;

Hamburger Menu Title

The HamburgerMenuTitle component renders the menu's heading and logo. It gets the menuItem from the context and uses the HamburgerMenuItemText component to render the top-level menu item's display name as the heading on each level.

import { HamburgerMenuTitle } from '@hv/ui/hamburger-menu';

<HamburgerMenuTitle>Categories</HamburgerMenuTitle>;

Hamburger Menu Item Text

The HamburgerMenuItemText component takes a menuItem as its property and renders its display name as the top-level heading. This component is used within the HamburgerMenuTitle and HamburgerMenuBackButton components; it is not used directly in the app.

Property	Description	Type
item	The current menu level (optional)	NavigationMenuItem

Hamburger Menu Button

The HamburgerMenuButton component renders a Menu trigger button. This component is unused.

Hamburger Menu Back Button

The HamburgerMenuBackButton component uses HambergerMenuItemText and the HamburgerMenuContext to render a back link so users can go to a previous menu pane. It gets the currentLevel, parentItem, onSelectParentItem, and backButtonRef from the context to return a <li> containing the button.

import { HamburgerMenuBackButton } from '@hv/ui/hamburger-menu';

<HamburgerMenuBackButton aria-label='Back to parent'>
  Back
</HamburgerMenuBackButton>;

Hamburger Menu Link

The HamburgerMenuLink component renders navigation links and will close the menu on click. This component's styles can be overridden by passing in a className property.

import { HamburgerMenuLink } from '@hv/ui/hamburger-menu';

<HamburgerMenuLink {...link}>Category Name</HamburgerMenuLink>;

Hamburger Menu Next Level Button

The HamburgerMenuNextLevelButton component renders navigation buttons to navigate through the levels. It gets the currentLevel, categoryItemRef, setLevel, and onSelectMenuItem values from the context to set the button's behavior. If it is the first link within a navigation level, it is assigned the categoryItemRef. This component's styles can be overridden by passing in a className property.

Property	Description	Type
menuItem	The current menu level	NavigationMenuItem
isFirst	If this is the first child in a navigation level	Boolean

import { HamburgerMenuNextLevelButton } from '@hv/ui/hamburger-menu';

<HamburgerMenuNextLevelButton menuItem={item} isFirst={false} {...link}>
  Category Name
</HamburgerMenuNextLevelButton>;

Hamburger Menu Children

The HamburgerMenuChildren component renders navigation items as list items.

import { HamburgerMenuChildren } from '@hv/ui/hamburger-menu';

<HamburgerMenuChildren>
  <>// ...menu children</>
</HamburgerMenuContent>;

Hamburger Menu Current Item

The HamburgerMenuCurrentItem component is a wrapper component that exposes the current level to its child components. This component will render the HamburgerMenuViewAll component and can be used to render things such as CMS content related to this navigation level.

import { HamburgerMenuCurrentItem } from '@hv/ui/hamburger-menu';

<HamburgerMenuCurrentItem>
  {item => {
    <li>
      <HamburgerMenuViewAll {...link}>View All</HamburgerMenuViewAll>
    </li>;
    // CMS content
  }}
</HamburgerMenuCurrentItem>;

Hamburger Menu View All

The HamburgerMenuViewAll component renders a HamburgermenuLink in mid-level navigation nodes so uses can navigate to that category.

import { HamburgerMenuViewAll } from '@hv/ui/hamburger-menu';

<HamburgerMenuViewAll {...link}>View All</HamburgerMenuViewAll>;