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 {
    ChakraProvider,
    ErrorComponent,
    ReadyPage,
    notificationProvider,
    refineTheme,
    Box,
    HStack,
    Button,
} from "@pankod/refine-chakra-ui";

import { PostCreate, PostEdit, PostList } from "./pages";

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

    return (
        <Box display="flex" flexDirection="column">
            <Box
                pt="2"
                px="4"
                bg="chakra-body-bg"
                borderBottom="1px"
                borderColor="gray.200"
            >
                <HStack>
                    {menuItems.map(({ route, label, icon }) => (
                        <Box key={route}>
                            <Button
                                as={Link}
                                to={route}
                                label={label}
                                variant="ghost"
                                colorScheme="green"
                                leftIcon={
                                    icon ?? ((<IconList size={20} />) as any)
                                }
                                isActive={route === selectedKey}
                                borderBottomLeftRadius="0"
                                borderBottomRightRadius="0"
                            >
                                {label}
                            </Button>
                        </Box>
                    ))}
                </HStack>
            </Box>
            <Box>{children}</Box>
        </Box>
    );
};

const App = () => {
    return (
        <ChakraProvider theme={refineTheme}>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                notificationProvider={notificationProvider()}
                ReadyPage={ReadyPage}
                Layout={CustomLayout}
                resources={[
                    {
                        name: "posts",
                        list: PostList,
                    },
                    {
                        name: "categories",
                        list: DummyListPage,
                        icon: <IconCategory />,
                    },
                    {
                        name: "users",
                        list: DummyListPage,
                        icon: <IconUsers />,
                    },
                ]}
            />
        </ChakraProvider>
    );
};

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