Customization

Layouts

How layouts work in the App Router and a reference for all layout variants in Haze Dashboard.

How Layouts Work

Layouts in Next.js are layout.tsx components that wrap all pages inside their folder (and any nested folders). They receive a children prop where each page renders.

Haze uses route groups (folders wrapped in parentheses, e.g. (dashboard)) to apply different layouts without affecting URLs:

src/app/
├── (dashboard)/
│   ├── layout.tsx        # Sidebar + header
│   ├── dashboard/page.tsx
│   ├── orders/page.tsx
│   └── settings/page.tsx
├── (auth)/
│   ├── layout.tsx        # Centered card layout
│   ├── login/page.tsx
│   └── register/page.tsx
└── (marketing)/
    ├── layout.tsx        # Public navbar + footer
    └── page.tsx          # Landing page

Layout Reference

Haze Dashboard includes 7 layouts, each designed for a different context:

Default Layout (Sidebar)

The default dashboard layout is the most complex. It consists of:

• Sidebar— Fixed left sidebar with dark charcoal background, logo, navigation groups, and a user section. Collapsible on desktop, slide-out drawer on mobile.
• Header— Sticky header with backdrop blur. Contains search trigger, locale switcher, color mode toggle, notification bell, and user avatar dropdown.
• Content area— Scrollable main content with padding. Page transitions animate between route changes.

Creating a Custom Layout

To create a new layout, add a layout.tsx file inside a route group folder. All pages inside that folder will share the layout:

// src/app/(my-section)/layout.tsx
export default function MyLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-[var(--haze-bg)]">
      <header className="border-b border-divider px-6 py-4">
        <h1 className="text-lg font-semibold">My App</h1>
      </header>
      <main className="p-6">{children}</main>
    </div>
  )
}

Nested Layouts

Layouts compose. A page nested inside multiple layout folders is wrapped by all of them, outer-first. This lets you add page-specific chrome (e.g. a settings sub-nav) without rewriting the dashboard shell.

Next Steps

Learn how to add new pages and routes in the Adding Pages guide, or explore the Theming reference.