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:

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,
useNotificationProvider,
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.

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.