App Layout
Pre-configured layout patterns that combine sidebar, header, and content areas.
CMS Demo
See how to integrate app layouts with CMS navigation:
Loading...
CMS ConfigurationSimulates Payload CMS layout configuration
Basic Usage
Loading...
App LayoutComplete application layout
Installation
The App Layout components are part of the UI package and use the Sidebar components internally.
pnpm add @corew500/uiUsage
import {
AppLayout,
AppSidebar,
AppHeader,
} from "@mordecai-design-system/ui"<AppLayout
sidebar={<AppSidebar nav={navItems} header={<Logo />} />}
header={<AppHeader title="Dashboard" />}
>
<YourPageContent />
</AppLayout>Examples
Basic Layout
const navItems = [
{
title: "Main",
items: [
{ title: "Dashboard", href: "/", icon: <HomeIcon /> },
{ title: "Settings", href: "/settings", icon: <SettingsIcon /> },
]
}
]
<AppLayout
sidebar={<AppSidebar nav={navItems} />}
header={<AppHeader title="Dashboard" />}
>
<DashboardContent />
</AppLayout>With Header Actions
<AppLayout
sidebar={<AppSidebar nav={navItems} />}
header={
<AppHeader
title="Settings"
right={<Button>Save</Button>}
/>
}
>
<SettingsForm />
</AppLayout>Custom Sidebar Content
<AppLayout
sidebar={
<AppSidebar header={<Logo />} footer={<UserMenu />}>
<CustomNavigation />
</AppSidebar>
}
>
<Content />
</AppLayout>Components
AppLayout
| Prop | Type | Default | Description |
|---|---|---|---|
| sidebar* | enum | — | Sidebar element (use AppSidebar or custom Sidebar) |
| header | enum | — | Header element (use AppHeader or custom header) |
| className | string | — | Additional className for the layout wrapper |
| contentClassName | string | — | Additional className for the main content area |
| defaultOpen | enum | true | Default sidebar open state |
AppSidebar
| Prop | Type | Default | Description |
|---|---|---|---|
| nav | AppNavSection[] | — | Navigation sections |
| header | enum | — | Header content (logo, brand, etc.) |
| footer | enum | — | Footer content (user menu, settings, etc.) |
| className | string | — | Additional className for the sidebar |
| renderLink | (item: AppNavItem, children: ReactNode) => ReactNode | — | Render function for nav items (for custom Link components) |
AppHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Page title |
| left | enum | — | Left side content (after sidebar trigger) |
| right | enum | — | Right side content |
| className | string | — | Additional className |
| showSidebarTrigger | enum | true | Show the sidebar trigger button |
Type Definitions
interface AppNavItem {
title: string
href: string
icon?: ReactNode
isActive?: boolean
label?: string
}
interface AppNavSection {
title: string
items: AppNavItem[]
}Related Components
For more control over layouts, use the underlying components: