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';
import { useState } from 'react';

export default function Demo() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <SideNav isOpen={isOpen} onOpenChange={setIsOpen}>
      <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 playground

Side nav provides a simple list of navigation items with icons and labels. It automatically handles responsive behavior, collapsing to an overlay on smaller screens.

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';
import { useState } from 'react';

export default function Demo() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <SideNav isOpen={isOpen} onOpenChange={setIsOpen}>
      <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 playground

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.

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.