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 {
  MantineProvider,
  Global,
  NotificationsProvider,
  useNotificationProvider,
  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={useNotificationProvider}
          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.

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

Creating a Custom Layout​

Creating a Custom Layout