Main nav

The main nav is the primary way users navigate the user interface. It is consistently visible throughout the service.

import { ... } from '@ag.ds-next/react/main-nav';

Usage

Main nav components can be imported via the main-nav entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/main-nav';

MainNav Props
Prop	Type	Description
activePath?	string	Used for highlighting the active navigation item.
background?	"body" \| "bodyAlt"Default: "body"	The background of the component.
borderColor?	ResponsiveProp<"border" \| "selected" \| "muted" \| "accent" \| "info" \| "success" \| "error" \| "warning">Default: "accent"
children?	ReactNode
focusMode?	booleanDefault: false	When true, removes all navigation items to reduce distractions.
id?	string	Defines an identifier (ID) which must be unique.
items?	MainNavListItemType[]	List of navigation items to display.
secondaryItems?	(MainNavListDropdown \| MainNavListItemType)[]	Optional list of navigation items to display on the right of the component.

You can view the full source code for this package on Github.