Side navigation usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

The side nav component enables persistent navigation within your application.

When to use

• For applications with multiple sections or pages that need persistent navigation.
• For complex applications with hierarchical navigation structure.

When not to use

• For temporary or contextual navigation.
• When screen real estate is extremely limited and every pixel counts.

Usage

Preview

Menu item 1Menu item 2Menu item 3Menu item 4

Code

import {
  UNSTABLE_SideNav as SideNav,
  UNSTABLE_SideNavList as SideNavList,
  UNSTABLE_SideNavListItem as SideNavListItem,
} from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <SideNav>
      <SideNavList>
        <SideNavListItem href="#1" isActive={true} icon={<IconPlaceholder />}>
          Menu item 1
        </SideNavListItem>
        <SideNavListItem href="#2" isActive={false} icon={<IconPlaceholder />}>
          Menu item 2
        </SideNavListItem>
        <SideNavListItem href="#3" isActive={false} icon={<IconPlaceholder />}>
          Menu item 3
        </SideNavListItem>
        <SideNavListItem href="#4" isActive={false} icon={<IconPlaceholder />}>
          Menu item 4
        </SideNavListItem>
      </SideNavList>
    </SideNav>
  );
}

Copy code Open in StackBlitz

Side nav provides a simple list of navigation items with icons and labels. We recommend using side nav inside app shell, which handles the mobile drawer, header toggle, and layout offsets for you.

Within app shell

Preview

Code

import {
  AppHeader,
  UNSTABLE_AppShell as AppShell,
  UNSTABLE_AppShellBody as AppShellBody,
  UNSTABLE_SideNav as SideNav,
  UNSTABLE_SideNavList as SideNavList,
  UNSTABLE_SideNavListItem as SideNavListItem,
  Text,
} from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <SideNav>
        <SideNavList>
          <SideNavListItem href="#1" isActive={true} icon={<IconPlaceholder />}>
            Menu item 1
          </SideNavListItem>
          <SideNavListItem href="#2" isActive={false} icon={<IconPlaceholder />}>
            Menu item 2
          </SideNavListItem>
          <SideNavListItem href="#3" isActive={false} icon={<IconPlaceholder />}>
            Menu item 3
          </SideNavListItem>
        </SideNavList>
      </SideNav>
      <AppShellBody>
        <Text as="p" margin={16}>
          Hello, world!
        </Text>
      </AppShellBody>
    </AppShell>
  );
}

Copy code Open in StackBlitz

Inside app shell, side nav connects to the app header. App shell manages open and close state, shows a navigation toggle on smaller screens, and keeps the side nav expanded on large viewports by default.

With sections

Preview

Menu item 1Menu item 2

Section 1

Menu item 3Menu item 4

Section 2

Menu item 5Menu item 6

Code

import {
  UNSTABLE_SideNav as SideNav,
  UNSTABLE_SideNavList as SideNavList,
  UNSTABLE_SideNavListItem as SideNavListItem,
  UNSTABLE_SideNavListSection as SideNavListSection,
} from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <SideNav>
      <SideNavList>
        <SideNavListItem href="#1" isActive={true} icon={<IconPlaceholder />}>
          Menu item 1
        </SideNavListItem>
        <SideNavListItem href="#2" isActive={false} icon={<IconPlaceholder />}>
          Menu item 2
        </SideNavListItem>
        <SideNavListSection label="Section 1">
          <SideNavListItem href="#3" isActive={false} icon={<IconPlaceholder />}>
            Menu item 3
          </SideNavListItem>
          <SideNavListItem href="#4" isActive={false} icon={<IconPlaceholder />}>
            Menu item 4
          </SideNavListItem>
        </SideNavListSection>
        <SideNavListSection label="Section 2">
          <SideNavListItem href="#5" isActive={false} icon={<IconPlaceholder />}>
            Menu item 5
          </SideNavListItem>
          <SideNavListItem href="#6" isActive={false} icon={<IconPlaceholder />}>
            Menu item 6
          </SideNavListItem>
        </SideNavListSection>
      </SideNavList>
    </SideNav>
  );
}

Copy code Open in StackBlitz

Group related navigation items using sections to create a hierarchical structure. This helps users understand the organization of your application and find related functionality more easily.

Collapsible (unstable)

Preview

Code

import {
  AppHeader,
  UNSTABLE_AppShell as AppShell,
  UNSTABLE_AppShellBody as AppShellBody,
  UNSTABLE_SideNav as SideNav,
  UNSTABLE_SideNavList as SideNavList,
  UNSTABLE_SideNavListItem as SideNavListItem,
  Text,
} from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <SideNav UNSTABLE_isCollapsible>
        <SideNavList>
          <SideNavListItem href="#1" isActive={true} icon={<IconPlaceholder />}>
            Menu item 1
          </SideNavListItem>
          <SideNavListItem href="#2" isActive={false} icon={<IconPlaceholder />}>
            Menu item 2
          </SideNavListItem>
          <SideNavListItem href="#3" isActive={false} icon={<IconPlaceholder />}>
            Menu item 3
          </SideNavListItem>
        </SideNavList>
      </SideNav>
      <AppShellBody>
        <Text as="p" margin={16}>
          Hello, world!
        </Text>
      </AppShellBody>
    </AppShell>
  );
}

Copy code Open in StackBlitz

Side nav supports a collapsible mode, letting users reduce it to an icon-only rail for more screen space. In this mode, ensure every top-level navigation item includes a clear and meaningful icon.

Note: this feature is currently unstable and may change in future releases. We recommend using it with caution and only when necessary.

Best practices

Navigation organization

• Group related items into sections.
• Use clear, concise labels that describe the destination.

Icon selection

• Use consistent icon styles throughout your navigation.
• Choose icons that clearly represent their destination.

Active state management

• Always indicate the current page.

Expansion state

• Consider persisting the expanded state for better user experience.