Flyout Navigation

The High Velocity front-end app uses a client-side flyout navigation in the default layout in large viewports. This navigation displays each category in its own pane and contains all subcategory links and navigation content together.

The High Velocity front-end app's FlyoutNavigation component is built with Radix's NavigationMenuPrimitive parts. Visit the Radix site for more information and examples.

The NavigationMenu uses these more atomic components to structure and style the navigation. It requires a navigation tree made up of NavigationMenuItem nodes. There are eight components available in the hv-ui navigation-menu package:

• NavigationMenu: wrapper that styles the navigation and renders children
• NavigationMenuList: contains the top level menu items
• NavigationMenuItem: a top level menu item, contains a link or trigger with content combination.
• NavigationMenuTrigger: button that toggles the content
• NavigationMenuContent: wrapper for the content associated with the trigger
• NavigationMenuLink: navigation link
• NavigationMenuViewport: controls which viewport renders the navigation content
• NavigationMenuIndicator: optional component use to highlight the active trigger

Navigation Menu

The NavigationMenu component is the main wrapper component. It contains the NavigationMenuViewport component that renders the menu in the active viewport. Its styles can be overridden by passing in a className property.

import { NavigationMenu } from '@hv/ui/navigation-menu';

<NavigationMenu>
  <>// ...menu content</>
</NavigationMenu>;

Navigation Menu list

The NavigationMenuList contains the top level menu items.

import { NavigationMenu, NavigationMenuList } from '@hv/ui/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <>// ...menu content</>
  </NavigationMenuList>
</NavigationMenu>;

Navigation Menu Item

The NavigationMenuItem a top level menu item, contains a link or trigger with content combination.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
} from '@hv/ui/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <>// ...menu content</>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>;

Navigation Menu Trigger

The NavigationMenuTrigger button toggles its associated content. In the High Velocity front-end app, this button will toggle the content on hover for mouse users or, for keyboard users, on hitting the enter key while the button is focused. If an href is supplied, mouse users will be routed to the location on click.

Property	Description	Type
href	Optional link location	String

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
} from '@hv/ui/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Top-Level Category</NavigationMenuTrigger>
      <>// ...menu content</>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>;

Navigation Menu Content

The NavigationMenuContent wraps the content associated with a trigger.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
} from '@hv/ui/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Top-Level Category</NavigationMenuTrigger>
      <NavigationMenuContent>
        <>// ...menu content</>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>;

Navigation Menu Link

The NavigationMenuLink renders a link.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@hv/ui/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Top-Level Category</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Sub-category 1</NavigationMenuLink>
        <NavigationMenuLink>Sub-category 2</NavigationMenuLink>
        <NavigationMenuLink>Sub-category 3</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>;

Navigation Menu Viewport

The NavigationMenuViewport controls which viewport renders the active navigation content. This component is returned in the hv-ui NavigationMenu component.

Navigation Menu Indicator

The NavigationMenuIndicator can be used to highlight the active trigger. This component is unused in the High Velocity front-end app.