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