Top nav usage guidelines

Usage guidelines API

The top nav component enables persistent navigation within your application. It’s designed to work below the app header and above the main content area, offering a consistent way to navigate between related sections or pages.

When to use

For navigation within an application, positioned below the app header.
When you need horizontal navigation for 3-7 related sections or pages.

When not to use

For complex hierarchical navigation. Use side nav instead.
For page-level navigation. Consider tabs instead.

import { AppHeader, UNSTABLE_TopNav as TopNav, UNSTABLE_TopNavItem as TopNavItem } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <TopNav>
        <TopNavItem href="#" isActive>
          Home
        </TopNavItem>
        <TopNavItem href="#about">About</TopNavItem>
        <TopNavItem href="#contact">Contact</TopNavItem>
      </TopNav>
    </>
  );
}

Within app shell

Preview
Code

This is the app shell body.

import {
  AppHeader,
  UNSTABLE_AppShell as AppShell,
  UNSTABLE_AppShellBody as AppShellBody,
  Text,
  UNSTABLE_TopNav as TopNav,
  UNSTABLE_TopNavItem as TopNavItem,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <TopNav>
        <TopNavItem href="#" isActive>
          Home
        </TopNavItem>
        <TopNavItem href="#about">About</TopNavItem>
        <TopNavItem href="#contact">Contact</TopNavItem>
      </TopNav>
      <AppShellBody>
        <Text as="p" variant="body" marginTop={16} marginBottom={16}>
          This is the app shell body.
        </Text>
      </AppShellBody>
    </AppShell>
  );
}

The top nav is commonly used within the app shell layout, positioned between the app header and the main content area.

Content writing

Use clear, concise labels for navigation items
Keep labels consistent in length and style across all items