Skip to main content
Version: 3.xx.xxSwizzle 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:

http://localhost:3000
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. β†’