PageLayout

A full-page layout shell with Navbar, optional sidebar, content area, and Footer.

Import

import { PageLayout } from "@gumtree/ui/layout/PageLayout";

Props

PropTypeDefaultDescription
sidebarComponentChildren-Sidebar content rendered to the left of main
navbarEndComponentChildren-Content for the Navbar end slot
childrenComponentChildren-Main content area

Examples

With Sidebar

A page layout with a sidebar and main content.

Main Content

Page body goes here.

Gumtree Git Forge
<PageLayout
  sidebar={<Sidebar items={[
    { label: "Home", href: "#", active: true },
    { label: "Settings", href: "#" },
  ]} />}
>
  <h2>Main Content</h2>
  <p>Page body goes here.</p>
</PageLayout>

Without Sidebar

PageLayout works without a sidebar too.

Full Width Content

No sidebar in this layout.

Gumtree Git Forge
<PageLayout>
  <h2>Full Width Content</h2>
  <p>No sidebar in this layout.</p>
</PageLayout>