Layout Components

Refine provides layout components that work consistently across all UI frameworks. These components handle navigation, branding, and responsive behavior out of the box.

ThemedLayout

The main layout component that combines sidebar, header, and content area.

Basic Usage

Ant Design
Material UI
Mantine
Chakra UI

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/antd";

function App() {
  return (
    <Refine
      // ... other props
    >
      <ThemedLayout>
        {/* Your pages */}
      </ThemedLayout>
    </Refine>
  );
}

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/mui";

function App() {
  return (
    <Refine
      // ... other props
    >
      <ThemedLayout>
        {/* Your pages */}
      </ThemedLayout>
    </Refine>
  );
}

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/mantine";

function App() {
  return (
    <Refine
      // ... other props
    >
      <ThemedLayout>
        {/* Your pages */}
      </ThemedLayout>
    </Refine>
  );
}

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/chakra-ui";

function App() {
  return (
    <Refine
      // ... other props
    >
      <ThemedLayout>
        {/* Your pages */}
      </ThemedLayout>
    </Refine>
  );
}

Props

Prop	Type	Description
`Sider`	`React.FC`	Custom sidebar component
`Header`	`React.FC`	Custom header component
`Title`	`React.FC`	Custom title/logo component
`Footer`	`React.FC`	Custom footer component
`OffLayoutArea`	`React.FC`	Component rendered outside the main layout
`initialSiderCollapsed`	`boolean`	Initial collapsed state of sidebar

Custom Layout

You can customize individual parts of the layout:

import {
  ThemedLayout,
  ThemedSider,
  ThemedHeader,
  ThemedTitle,
} from "@refinedev/antd";

function App() {
  return (
    <ThemedLayout
      Sider={() => <ThemedSider fixed />}
      Header={() => <ThemedHeader sticky />}
      Title={({ collapsed }) => (
        <ThemedTitle
          collapsed={collapsed}
          text="My Admin Panel"
          icon={<MyLogo />}
        />
      )}
      Footer={() => <div>© 2024 My Company</div>}
    >
      {/* Your pages */}
    </ThemedLayout>
  );
}

Sider

The sidebar component displays navigation menu and branding.

Features

Automatic menu generation from resources
Collapsible on desktop
Drawer mode on mobile
Active route highlighting
Icon support
Nested menu support

Basic Usage

Ant Design
Material UI

import { ThemedSider } from "@refinedev/antd";

function CustomLayout() {
  return (
    <ThemedLayout
      Sider={() => (
        <ThemedSider
          fixed
          render={({ items, logout, collapsed }) => (
            <>
              {items}
              {logout}
            </>
          )}
        />
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

import { ThemedSider } from "@refinedev/mui";

function CustomLayout() {
  return (
    <ThemedLayout
      Sider={() => (
        <ThemedSider
          render={({ items, logout, collapsed }) => (
            <>
              {items}
              {logout}
            </>
          )}
        />
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Props

Prop	Type	Description
`Title`	`React.FC`	Custom title component
`render`	`function`	Custom render function for menu items
`fixed`	`boolean`	Fixed position sidebar (Ant Design)
`meta`	`object`	Meta information for menu items

Add custom items to the sidebar menu:

function App() {
  return (
    <Refine
      resources={[
        {
          name: "products",
          list: "/products",
          meta: {
            icon: <ShoppingOutlined />,
            label: "Products",
          },
        },
        {
          name: "orders",
          list: "/orders",
          meta: {
            icon: <OrderOutlined />,
            label: "Orders",
          },
        },
      ]}
    >
      <ThemedLayout>
        {/* Content */}
      </ThemedLayout>
    </Refine>
  );
}

The header component displays the top navigation bar.

Features

User menu
Notifications
Search
Breadcrumb navigation
Responsive design

Basic Usage

Ant Design
Material UI

import { ThemedHeader } from "@refinedev/antd";

function CustomLayout() {
  return (
    <ThemedLayout
      Header={() => <ThemedHeader sticky />}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

import { ThemedHeader } from "@refinedev/mui";

function CustomLayout() {
  return (
    <ThemedLayout
      Header={() => <ThemedHeader sticky />}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Props

Prop	Type	Description
`sticky`	`boolean`	Sticky header on scroll

Custom Header

Create a completely custom header:

import { useGetIdentity, useLogout } from "@refinedev/core";
import { Avatar, Dropdown, Menu } from "antd";

function CustomHeader() {
  const { data: user } = useGetIdentity();
  const { mutate: logout } = useLogout();

  return (
    <div style={{ display: "flex", justifyContent: "flex-end", padding: 16 }}>
      <Dropdown
        overlay={
          <Menu>
            <Menu.Item onClick={() => logout()}>Logout</Menu.Item>
          </Menu>
        }
      >
        <div>
          <Avatar src={user?.avatar} />
          <span style={{ marginLeft: 8 }}>{user?.name}</span>
        </div>
      </Dropdown>
    </div>
  );
}

function App() {
  return (
    <ThemedLayout Header={CustomHeader}>
      {/* Content */}
    </ThemedLayout>
  );
}

Title

The title component displays your application logo and name.

Basic Usage

Ant Design
Material UI

import { ThemedTitle } from "@refinedev/antd";

function CustomLayout() {
  return (
    <ThemedLayout
      Title={({ collapsed }) => (
        <ThemedTitle
          collapsed={collapsed}
          text="My Admin"
          icon={<img src="/logo.svg" alt="Logo" />}
        />
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

import { ThemedTitle } from "@refinedev/mui";

function CustomLayout() {
  return (
    <ThemedLayout
      Title={({ collapsed }) => (
        <ThemedTitle
          collapsed={collapsed}
          text="My Admin"
          icon={<img src="/logo.svg" alt="Logo" />}
        />
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Props

Prop	Type	Description
`collapsed`	`boolean`	Sidebar collapsed state
`text`	`string`	Application name
`icon`	`ReactNode`	Application logo

Automatic breadcrumb navigation based on current route.

Basic Usage

Ant Design
Material UI

import { Breadcrumb } from "@refinedev/antd";
import { List } from "@refinedev/antd";

export const ProductList = () => {
  return (
    <List
      breadcrumb={<Breadcrumb />}
    >
      {/* Content */}
    </List>
  );
};

import { Breadcrumb } from "@refinedev/mui";
import { List } from "@refinedev/mui";

export const ProductList = () => {
  return (
    <List
      breadcrumb={<Breadcrumb />}
    >
      {/* Content */}
    </List>
  );
};

import { useBreadcrumb } from "@refinedev/core";
import { Breadcrumb } from "antd";

function CustomBreadcrumb() {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <Breadcrumb>
      {breadcrumbs.map((breadcrumb) => (
        <Breadcrumb.Item key={breadcrumb.label}>
          {breadcrumb.href ? (
            <a href={breadcrumb.href}>{breadcrumb.label}</a>
          ) : (
            breadcrumb.label
          )}
        </Breadcrumb.Item>
      ))}
    </Breadcrumb>
  );
}

Responsive Behavior

All layout components are responsive by default:

Desktop: Full sidebar, sticky header
Tablet: Collapsible sidebar
Mobile: Drawer sidebar, compact header

import { useState } from "react";
import { ThemedLayout } from "@refinedev/antd";

function App() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <ThemedLayout
      initialSiderCollapsed={collapsed}
      onSiderCollapsed={(collapsed) => {
        setCollapsed(collapsed);
        // Optionally save to localStorage
        localStorage.setItem("siderCollapsed", String(collapsed));
      }}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Off-Layout Area

Render components outside the main layout (e.g., floating buttons):

import { FloatButton } from "antd";
import { ThemedLayout } from "@refinedev/antd";

function App() {
  return (
    <ThemedLayout
      OffLayoutArea={() => (
        <FloatButton.BackTop />
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Best Practices

Consistent Branding: Use the same logo and colors throughout the layout
Clear Navigation: Group related resources in the sidebar
Responsive Testing: Test on different screen sizes
Accessibility: Ensure keyboard navigation works
Performance: Lazy load heavy components in the sidebar

Examples

function App() {
  return (
    <Refine
      resources={[
        {
          name: "products",
          list: "/products",
          meta: { icon: <ShoppingOutlined />, parent: "catalog" },
        },
        {
          name: "categories",
          list: "/categories",
          meta: { icon: <FolderOutlined />, parent: "catalog" },
        },
      ]}
    >
      <ThemedLayout>
        {/* Content */}
      </ThemedLayout>
    </Refine>
  );
}

Dark Mode Toggle

import { Switch } from "antd";
import { useColorMode } from "@refinedev/antd";

function DarkModeToggle() {
  const { mode, setMode } = useColorMode();

  return (
    <Switch
      checked={mode === "dark"}
      onChange={(checked) => setMode(checked ? "dark" : "light")}
      checkedChildren="🌙"
      unCheckedChildren="☀️"
    />
  );
}

function App() {
  return (
    <ThemedLayout
      Header={() => (
        <div style={{ display: "flex", justifyContent: "flex-end" }}>
          <DarkModeToggle />
        </div>
      )}
    >
      {/* Content */}
    </ThemedLayout>
  );
}

Next Steps

CRUD Components

Build data interfaces

Button Components

Learn about action buttons

Theming

Customize your layout theme

Examples

See complete examples

Overview

Supported UI Frameworks

Components

Layout Components

ThemedLayout

Basic Usage

Props

Custom Layout

Sider

Features

Basic Usage

Props

Custom Menu Items

Header

Features

Basic Usage

Props

Custom Header

Title

Basic Usage

Props

Basic Usage

Responsive Behavior

Controlling Sidebar State

Off-Layout Area

Best Practices

Examples

Multi-Level Menu

Dark Mode Toggle

Next Steps

CRUD Components

Button Components

Theming

Examples

Build docs developers (and LLMs) love

Overview

Supported UI Frameworks

Components

​ThemedLayout

​Basic Usage

​Props

​Custom Layout

​Sider

​Features

​Basic Usage

​Props

​Custom Menu Items

​Header

​Features

​Basic Usage

​Props

​Custom Header

​Title

​Basic Usage

​Props

​Breadcrumb

​Basic Usage

​Custom Breadcrumb

​Responsive Behavior

​Controlling Sidebar State

​Off-Layout Area

​Best Practices

​Examples

​Multi-Level Menu

​Dark Mode Toggle

​Next Steps

CRUD Components

Button Components

Theming

Examples

Build docs developers (and LLMs) love

ThemedLayout

Basic Usage

Props

Custom Layout

Sider

Features

Basic Usage

Props

Custom Menu Items

Header

Features

Basic Usage

Props

Custom Header

Title

Basic Usage

Props

Breadcrumb

Basic Usage

Custom Breadcrumb

Responsive Behavior

Controlling Sidebar State

Off-Layout Area

Best Practices

Examples

Multi-Level Menu

Dark Mode Toggle

Next Steps