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:

http://localhost:3000

Live previews only work with the latest documentation.

import {
    Refine,
    LayoutProps,
    useMenu,
    useRouterContext,
} from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
    MantineProvider,
    Global,
    NotificationsProvider,
    notificationProvider,
    LightTheme,
    Box,
    MantineHeader,
    Group,
    NavLink,
} from "@pankod/refine-mantine";
import { IconList, IconCategory, IconUsers } from "@tabler/icons";

import { PostList } from "./pages/posts";

const CustomLayout: React.FC<LayoutProps> = ({ children }) => {
    const { menuItems, selectedKey } = useMenu();
    const { Link } = useRouterContext();

    return (
        <Box sx={{ display: "flex", flexDirection: "column" }}>
            <MantineHeader height={50} p="xs">
                <Group>
                    {menuItems.map(({ route, label, icon }) => (
                        <Box key={route}>
                            <NavLink
                                component={Link}
                                to={route}
                                label={label}
                                icon={icon ?? <IconList />}
                                active={route === selectedKey}
                            />
                        </Box>
                    ))}
                </Group>
            </MantineHeader>
            <Box>{children}</Box>
        </Box>
    );
};

const App = () => {
    return (
        <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
            <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
            <NotificationsProvider position="top-right">
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(
                        "https://api.fake-rest.refine.dev",
                    )}
                    notificationProvider={notificationProvider}
                    Layout={CustomLayout}
                    resources={[
                        {
                            name: "posts",
                            list: PostList,
                        },
                        {
                            name: "categories",
                            list: DummyListPage,
                            icon: <IconCategory />,
                        },
                        {
                            name: "users",
                            list: DummyListPage,
                            icon: <IconUsers />,
                        },
                    ]}
                />
            </NotificationsProvider>
        </MantineProvider>
    );
};

We used useMenu hook to get the list of current resources and print it. We also use useRouterContext hook to get the router context and use it to create a link.

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