Skip to content
Cimpress UI

Side navigation API

Usage guidelinesAPI

Import

Section titled “Import”
import {
  UNSTABLE_SideNav,
  UNSTABLE_SideNavList,
  UNSTABLE_SideNavListItem,
  UNSTABLE_SideNavListSection,
} from '@cimpress-ui/react';

API reference

Section titled “API reference”

UNSTABLE_SideNav

Section titled “UNSTABLE_SideNav”
UNSTABLE_SideNavProps
children *
Section titled “ children * ”
ReactNode
isOpen
Section titled “ isOpen ”
boolean
onOpenChange
Section titled “ onOpenChange ”
(isOpen: boolean) => void
variant
Section titled “ variant ”
'fixed' | 'overlay'

Determines how the side nav is displayed and behaves.

  • overlay: The side nav slides in as an overlay on top of the main content. This is used when all available screen space is needed for the main content.
  • fixed: The side nav is fixed to the side and includes an expand button to toggle between a compact icon-only view and an expanded view showing labels. On smaller screens, it slides in as an overlay.
Defaults to 'fixed' .

UNSTABLE_SideNavList

Section titled “UNSTABLE_SideNavList”
UNSTABLE_SideNavListProps
children *
Section titled “ children * ”
ReactNode

UNSTABLE_SideNavListItem

Section titled “UNSTABLE_SideNavListItem”
UNSTABLE_SideNavListItemProps
children *
Section titled “ children * ”
StringLikeChildren
href *
Section titled “ href * ”
string
isActive
Section titled “ isActive ”
boolean
icon
Section titled “ icon ”
ReactNode

UNSTABLE_SideNavListSection

Section titled “UNSTABLE_SideNavListSection”
UNSTABLE_SideNavListSectionProps
children *
Section titled “ children * ”
ReactNode
label
Section titled “ label ”
string