Top nav API

Import

The top nav component consists of two main components that work together:

import { TopNav, TopNavItem } from '@cimpress-ui/react';

Displays horizontal navigation, typically below the app header.

TopNavProps

children * Section titled “ children * ” ReactNode: The contents of the top navigation. Must be one or more of <TopNavItem>.

Renders a single navigation item within TopNav.

TopNavItemProps

children * Section titled “ children * ” StringLikeChildren: The text to display as the navigation item label.
href * Section titled “ href * ” string: A URL to link to.
isActive Section titled “ isActive ” boolean: Whether the navigation item represents the current page.
routerOptions Section titled “ routerOptions ” undefined: Options for the configured client side router.
hrefLang Section titled “ hrefLang ” string: Hints at the human language of the linked URL. SeeMDN.
target Section titled “ target ” HTMLAttributeAnchorTarget: The target window for the link. See MDN.
rel Section titled “ rel ” string: The relationship between the linked resource and the current page. See MDN.
download Section titled “ download ” string | boolean: Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping Section titled “ ping ” string: A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy Section titled “ referrerPolicy ” HTMLAttributeReferrerPolicy: How much of the referrer to send when following the link. See MDN.