App shell API

Import

import { AppShell, AppShellBody } from '@cimpress-ui/react';

Side nav integration

App shell handles wiring up the side nav to the app header and managing the open/close state for you. The app header will display a button for toggling the side nav on smaller screens, and the open/close state is managed for you automatically.

Accessibility notes

App shell automatically renders a skip link that moves keyboard focus to AppShellBody. This helps keyboard users bypass repeated navigation chrome.

API reference

AppShell

Provides the foundational layout structure for applications, including header, navigation, and main content slots.

See app shell usage guidelines.

AppShellProps

children * Section titled “ children * ” ReactNode

The children of the app shell should be composed using specific components to fill the available layout slots:

<AppHeader /> for the global header
<SideNav /> for the side navigation
<TopNav /> for the top navigation bar
<AppShellBody /> for the main content area

These components should be passed as direct children to correctly populate the app shell layout.

id Section titled “ id ” string

The element's unique identifier. See MDN.

data-cim-style-root Section titled “ data-cim-style-root ” boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className Section titled “ UNSAFE_className ” string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

AppShellBody

Renders the main content area within AppShell.

AppShellBodyProps

children * Section titled “ children * ” ReactNode: Main content area of the app shell.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.