Skip to main content
Version: 3.xx.xx
Swizzle Ready

Layout

You can create custom layouts using <Refine> and <LayoutWrapper> components.

Both of these components can accept the listed props for customization. <Refine> being for global customization and the <LayoutWrapper> being for local.

Swizzle

You can swizzle this component to customize it with the refine CLI

Creating a Custom Layout

Let's start with creating a <CustomLayout/> component using LayoutProps from @pankod/refine-core with the following code:

src/components/layout.tsx
import React from "react";
import { LayoutProps } from "@pankod/refine-core";
import {
Sider as DefaultSider,
Header as DefaultHeader,
Box,
} from "@pankod/refine-mui";

export const CustomLayout: React.FC<LayoutProps> = ({
Sider,
Header,
Footer,
OffLayoutArea,
children,
}) => {
const SiderToRender = Sider ?? DefaultSider;
const HeaderToRender = Header ?? DefaultHeader;

return (
<Box display="flex" flexDirection="row">
<SiderToRender />
<Box
sx={{
display: "flex",
flexDirection: "column",
flex: 1,
minHeight: "100vh",
}}
>
<HeaderToRender />
<Box
component="main"
sx={{
p: { xs: 1, md: 2, lg: 3 },
flexGrow: 1,
bgcolor: "background.default",
}}
>
{children}
</Box>
{Footer && <Footer />}
</Box>
{OffLayoutArea && <OffLayoutArea />}
</Box>
);
};

We can now pass CustomLayout as Layout prop to <Refine/>:

src/App.tsx
import { Refine } from "@pankod/refine-core";
import { ReadyPage } from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { PostList } from "pages/posts";
import { CustomLayout } from "components";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={CustomLayout}
ReadyPage={ReadyPage}
// ...
/>
);
};

export default App;

After this, <Refine/> will use the CustomLayout instead of it's default Layout component.

localhost:3000
Live previews only work with the latest documentation.
INFORMATION

This example demonstrated how to configure a global layout. To learn how to use global layout in custom pages and make local modifications per page, refer to the <LayoutWrapper> docs.