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.

• Layout
• Sider
• Footer
• Header
• OffLayoutArea
• Title

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.

http://localhost:3000

Live previews only work with the latest documentation.

info

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. →