Nav list usage guidelines

Usage guidelines API Resources

The nav list component renders vertical navigation items with optional icons. It also supports expandable groups for nested navigation.

Usage

Preview
Code

import { UNSTABLE_NavList as NavList, UNSTABLE_NavListItem as NavListItem, RouterProvider } from '@cimpress-ui/react';
import { IconHome, IconInvoice, IconSettingsCog } from '@cimpress-ui/react/icons';
import { useState } from 'react';

export default function Demo() {
  const [path, setPath] = useState('/');

  return (
    <RouterProvider
      navigate={(nextPath) => {
        setPath(nextPath);
      }}
    >
      <NavList>
        <NavListItem href="/" isCurrent={path === '/'} icon={<IconHome />}>
          Home
        </NavListItem>
        <NavListItem href="/orders" isCurrent={path === '/orders'} icon={<IconInvoice />}>
          Orders
        </NavListItem>
        <NavListItem href="/settings" isCurrent={path === '/settings'} icon={<IconSettingsCog />}>
          Settings
        </NavListItem>
      </NavList>
    </RouterProvider>
  );
}

With groups

Preview
Code

import {
  UNSTABLE_NavList as NavList,
  UNSTABLE_NavListGroup as NavListGroup,
  UNSTABLE_NavListItem as NavListItem,
  RouterProvider,
} from '@cimpress-ui/react';
import { IconCategoryApparel, IconHome, IconInvoice } from '@cimpress-ui/react/icons';
import { useState } from 'react';

export default function Demo() {
  const [path, setPath] = useState('/products/all');

  return (
    <RouterProvider navigate={(nextPath) => setPath(nextPath)}>
      <NavList>
        <NavListItem href="/" isCurrent={path === '/'} icon={<IconHome />}>
          Home
        </NavListItem>
        <NavListGroup label="Products" icon={<IconCategoryApparel />} defaultExpanded={true}>
          <NavListItem href="/products/all" isCurrent={path === '/products/all'}>
            All products
          </NavListItem>
          <NavListItem href="/products/categories" isCurrent={path === '/products/categories'}>
            Categories
          </NavListItem>
        </NavListGroup>
        <NavListGroup label="Sales" icon={<IconInvoice />}>
          <NavListItem href="/sales/orders" isCurrent={path === '/sales/orders'}>
            Orders
          </NavListItem>
          <NavListItem href="/sales/invoices" isCurrent={path === '/sales/invoices'}>
            Invoices
          </NavListItem>
        </NavListGroup>
      </NavList>
    </RouterProvider>
  );
}