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. &#8594