Layout

Layout

The Layout component provides the application shell including navigation, sidebar, and main content area.

Usage

import { Layout } from '@/components/admin';

export const AppLayout = () => (
  <Layout>
    <Layout.Sidebar>
      <AppSidebar />
    </Layout.Sidebar>
    <Layout.Main>
      {children}
    </Layout.Main>
  </Layout>
);

Components

Layout.Sidebar

Sidebar container with navigation.

<Layout.Sidebar>
  <AppSidebar />
</Layout.Sidebar>

Layout.Main

Main content area.

<Layout.Main>
  <Outlet />
</Layout.Main>

Layout.Header

Optional header component.

<Layout.Header>
  <Breadcrumb />
  <UserMenu />
</Layout.Header>

Props

PropTypeDescription
childrenReactNodeLayout content
variant'default' | 'sidebar'Layout variant

Examples

Basic Layout

import { Layout, AppSidebar } from '@/components/admin';

export const AppLayout = () => (
  <Layout>
    <Layout.Sidebar>
      <AppSidebar />
    </Layout.Sidebar>
    <Layout.Main>
      <Outlet />
    </Layout.Main>
  </Layout>
);

With Header

import { Layout, AppSidebar, Breadcrumb, UserMenu } from '@/components/admin';

export const AppLayout = () => (
  <Layout>
    <Layout.Header>
      <Breadcrumb />
      <UserMenu />
    </Layout.Header>
    <Layout.Sidebar>
      <AppSidebar />
    </Layout.Sidebar>
    <Layout.Main>
      <Outlet />
    </Layout.Main>
  </Layout>
);

Installation

npx better-admin add layout
Edit on GitHub

On this page