App header usage guidelines

The app header is a persistent navigation component that appears at the top of an application, providing consistent branding and actions. It should be used to provide a clear and consistent global header experience across all Cimpress applications.

When to use

• As the header bar for all Cimpress applications to give users a consistent experience.

When not to use

• For page-level navigation or sub-sections within an application. For this consider using link tabs or breadcrumbs instead.

Usage

App name

Preview

My app

Code

import { AppHeader } from '@cimpress-ui/react';

export default function Demo() {
  return <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />;
}

The app name is always positioned on the left-hand side of the header. Pressing the app name will navigate users to the application’s landing page, homepage, or main dashboard.

Tools

Preview

My app

Code

import { AppHeader, IconButton } from '@cimpress-ui/react';
import { IconBookOpen, IconSettingsCog } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <AppHeader
      title="My app"
      titleLink={{ href: '#', target: '_self' }}
      tools={
        <>
          <IconButton variant="tertiary" size="small" icon={<IconBookOpen />} aria-label="Help" />
          <IconButton variant="tertiary" size="small" icon={<IconSettingsCog />} aria-label="Settings" />
        </>
      }
    />
  );
}

The tools slot is customizable and any combination of buttons, dropdowns, or other components can be added. Ensure that these actions are consistent across the entire application and are necessary to show on every page.

Tools should be designed with mobile responsiveness in mind. For example, a search input could be replaced with an icon button on mobile that opens a modal dialog when tapped.

User profile (simple auth tool)

Preview

My app

Jonathan Appleseed

Code

import { AppHeader, SimpleAuthTool } from '@cimpress-ui/react';
import { useState } from 'react';

export default function Demo() {
  const [isLoggedIn, setIsLoggedIn] = useState(true);

  return (
    <AppHeader
      title="My app"
      titleLink={{ href: '#', target: '_self' }}
      tools={
        <SimpleAuthTool
          profile={
            isLoggedIn
              ? {
                  name: 'Jonathan Appleseed',
                  email: 'jonathan.appleseed@cimpress.com',
                  picture:
                    'data:image/png;base64,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',
                }
              : undefined
          }
          onLoginRequested={() => setIsLoggedIn(true)}
          onLogoutRequested={() => setIsLoggedIn(false)}
        />
      }
    />
  );
}

The simple auth tool is a specific tool that should always be positioned on the right-hand side of the header. When a user is not logged in, it displays a login button. For authenticated users, it shows their avatar and name, along with a popover containing account-related information.

Formatting and layout

Placement

The header bar is always positioned at the very top of the page and should span the full width of the page. No content should ever be placed above the header bar (excluding overlays or elements that appear on top of everything).

Spacing

We recommend 24px of vertical spacing between the app header and the main content of the page.

Content writing

App name

App names should be consistent across an application so that a user always knows what application they are working in.

Tools

Any icons used in the tool slot should be clear, universal, and easy to understand. Only include actions that are applicable to the entire application regardless of which page the user is on, and keep the actions consistent across all pages in an application.