CMS layout

AdminLayout

The full admin shell: top navbar + sidebar navigation + breadcrumbs + content. Composes ui’s AppShell, Navbar, Sidebar and Breadcrumbs.


import { AdminLayout, UserMenu, NotificationCenter } from '@gg-software/cms';
 
<AdminLayout
    brand={<Logo />}
    sections={[
        { title: 'Shop', items: [{ key: 'orders', label: 'Orders', icon: <OrdersIcon /> }] },
        { title: 'Settings', items: [{ key: 'team', label: 'Team' }] },
    ]}
    activeKey="orders"
    onNavigate={(key) => router.push(`/${key}`)}
    breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Orders' }]}
    headerActions={
        <>
            <NotificationCenter notifications={notifications} />
            <UserMenu user={{ name: user.name }} onLogout={logout} />
        </>
    }
>
    <PageContent />
</AdminLayout>;

Prop	Type	Default	Description
`children`*	`ReactNode`	—	page content
`brand`	`ReactNode`	—	brand shown in the top navbar
`sections`*	`SidebarSection[]`	—	sidebar navigation sections (ui Sidebar shape)
`activeKey`	`string`	—	key of the active navigation item
`onNavigate`	`((key: string) => void)`	—	called when a navigation item without `href` is selected
`breadcrumbs`	`BreadcrumbItem[]`	—	breadcrumb trail rendered above the content
`headerActions`	`ReactNode`	—	right side of the navbar (UserMenu, NotificationCenter, …)
`sidebarCollapsed`	`boolean`	`false`	collapse the sidebar to icons
`sidebarWidth`	`string \| number`	`240`
`className`	`string`	—

* required · generated from packages/cms/src/layout/AdminLayout.tsx

PageHeader


<PageHeader
    title="Orders"
    description="All orders across your shops."
    breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Orders' }]}
    actions={<Button variant="primary">New order</Button>}
/>

Prop	Type	Default	Description
`title`*	`ReactNode`	—
`description`	`ReactNode`	—	muted line under the title
`breadcrumbs`	`BreadcrumbItem[]`	—	trail rendered above the title
`actions`	`ReactNode`	—	primary actions, right-aligned (buttons, menus)
`className`	`string`	—

* required · generated from packages/cms/src/layout/PageHeader.tsx

NavSidebar

ui’s Sidebar plus pinned header and footer areas — for AdminLayout’s sidebar slot when you need a brand block or a bottom area.


<NavSidebar header={<Logo />} footer={<Version />} sections={sections} activeKey={active} onSelect={setActive} />

Prop	Type	Default	Description
`sections`*	`SidebarSection[]`	—	grouped navigation (ui Sidebar shape)
`activeKey`	`string`	—
`onSelect`	`((key: string) => void)`	—	called when an item without `href` is selected
`header`	`ReactNode`	—	brand/logo area pinned to the top
`footer`	`ReactNode`	—	pinned bottom area (user, version, collapse toggle)
`collapsed`	`boolean`	`false`
`className`	`string`	—

* required · generated from packages/cms/src/layout/NavSidebar.tsx

UserMenu


<UserMenu
    user={{ name: 'Ada Lovelace', email: 'ada@acme.io', avatarUrl: '/ada.jpg' }}
    items={[{ key: 'billing', label: 'Billing', onClick: openBilling }]}
    onProfile={() => router.push('/profile')}
    onLogout={logout}
/>

Prop	Type	Default	Description
`user`*	`UserMenuUser`	—
`items`	`MenuItem[]`	`[]`	extra items rendered above the sign-out item
`onProfile`	`(() => void)`	—
`onLogout`	`(() => void)`	—
`compact`	`boolean`	`false`	hide the name/email next to the avatar (avatar-only trigger)
`className`	`string`	—

* required · generated from packages/cms/src/layout/UserMenu.tsx

NotificationCenter


<NotificationCenter
    notifications={items}
    onSelect={(n) => open(n)}
    onMarkAllRead={() => markAllRead()}
/>

Prop	Type	Default	Description
`notifications`*	`NotificationItem[]`	—
`onSelect`	`((notification: NotificationItem) => void)`	—	called with the clicked notification
`onMarkAllRead`	`(() => void)`	—	shows a "Mark all read" action when provided
`emptyText`	`ReactNode`	`No notifications`
`maxHeight`	`number`	`320`	max list height before scrolling (default 320)
`className`	`string`	—

* required · generated from packages/cms/src/layout/NotificationCenter.tsx

DashboardLayout

Responsive widget grid (see Dashboard for StatCard/KpiGrid).

Revenue128 400 Kč+12.5%

Orders1 203-2.1%

Visitors48 210+5.4%


<DashboardLayout minWidgetWidth={280}>
    <StatCard … />
    <Panel title="Sales"><LineChart data={sales} /></Panel>
</DashboardLayout>

Prop	Type	Default	Description
`children`*	`ReactNode`	—	dashboard widgets (StatCard, charts, panels, …)
`minWidgetWidth`	`string \| number`	`280`	widgets auto-fill columns at least this wide (default 280)
`gap`	`SpaceValue`	`md`
`className`	`string`	—

* required · generated from packages/cms/src/layout/DashboardLayout.tsx