Shell and navigation

The integrated header and quiet, labeled navigation groups are the preferred application-shell composition.

Preferred integrated shell

The live playground frame demonstrates this composition: one global header spans the viewport and the sidebar begins beneath it.

Dashboard

Healthy

Only the active destination receives a quiet surface. Section labels organize the information architecture without becoming controls.

Brand chrome

AppHeader tone="brand" and AppSidebar variant="brand" paint the chrome Conscia burgundy, as on conscia.com, in both appearances. Controls inside switch to light-on-burgundy automatically.

v1.6.0

Dashboard

Healthy

Burgundy carries the chrome, as the brand's colour-usage guide intends. The workspace stays on the neutral canvas so data keeps its contrast.

Supergraphic

ds-supergraphic draws the Conscia dot rings behind content: electric blue inside brand chrome, faint burgundy on light surfaces. Never behind data.

Brand chrome

Secure progress

Light surface

Welcome back

Canonical API

Static groups are explicit and remain visible by default.

const navigation = [
  {
    type: "group",
    id: "delivery",
    label: "Delivery metrics",
    items: [
      { id: "/dashboard", label: "Dashboard", icon: <LayoutDashboard /> },
      { id: "/reporting", label: "Reporting", icon: <FileText /> },
    ],
  },
];

<AppShell headerLayout="integrated">
  <AppHeader>
    <AppHeaderStart>{/* identity and context */}</AppHeaderStart>
    <AppHeaderSearch mobileTrigger={mobileSearch}>{search}</AppHeaderSearch>
    <AppHeaderActions>{/* utilities and account */}</AppHeaderActions>
  </AppHeader>
  <AppSidebar><AppSidebarContent><SidebarNavigation entries={navigation} /></AppSidebarContent></AppSidebar>
  <MainRegion>{children}</MainRegion>
</AppShell>

Explicit submenus

Use disclosure only for genuine hierarchy or unusually long groups; submenu triggers never receive the leaf active treatment.

{
  type: "submenu",
  id: "advanced",
  label: "Advanced tools",
  icon: <Settings />,
  defaultOpen: false,
  items: advancedRoutes,
}

Compatibility

Existing split headers and untyped collapsible sections continue to work during the v1 migration window.

Preferred

AppHeader with static SidebarNavigationGroup entries.

Supported

TopBar and AppSidebarHeader in split shells.

Migration-only

Untyped sections whose items collapse implicitly.