You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

Side nav

A vertical list of links use for site navigation, typically placed next to body content.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/side-nav';

Usage

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

For example:

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

Props

SideNav Props
PropTypeDescription
activePathstringUsed for highlighting the active element.
collapseTitlestringUsed as the title of the expand/collapse trigger on smaller screen sizes.
itemsSideNavMenuItemType[]The list of links.
titlestringThe title is placed at the top of the list of links.
background?"body" | "bodyAlt"Default: "body"If SideNav is placed on 'bodyAlt' background, please set this to 'bodyAlt'.
titleLink?stringIf provided, the title will be rendered as an anchor element.

Source

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