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. It offers two variants: a fixed, collapsible sidebar for desktop layouts, and an overlay variant which is triggered by a button.

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.

Properties

Variant

Value	Use cases
Fixed	The fixed variant provides a collapsible sidebar that can be toggled between a compact rail view (56px) and an expanded view (264px). On desktop, it maintains its position alongside the main content.
Overlay	The overlay variant slides in as an overlay on top of the main content. This is ideal when you need all available screen space for content and want the navigation to be available on demand.

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.