Custom Layout

Refine supports any layout you want with no restrictions and also provides default layouts with its UI packages. You are free to use them or create your own with the help of Refine's hooks and components. You can also use the swizzle command to customize the default layouts and adapt them to your needs.

Layout Elements

Layout

<Layout> components are designed to wrap your pages and provide a dashboard-like layout. <Layout> accepts rest of the layout elements in props.

Prop	Type	Description
`Sider`	`React.FC`	Component to render menu aside
`Header`	`React.FC`	Component to render at the top of the layout
`Title`	`React.FC`	Component to render inside `<Sider>`
`Footer`	`React.FC`	Component to render at the bottom of the layout
`OffLayoutArea`	`React.FC`	Component to render outside of the layout
`children`	`ReactNode`	Page content.

Sider

<Sider> components are designed to render menu items according to the resources you have defined in <Refine> components. useMenu hook is used under the hood to generate menu items.

Prop	Type	Description
`Title`	`React.FC`	Component to render at the top
`render`	`SiderRenderFunction`	Function to render the menu items and other elements inside the `<Sider>`
`meta`	`Record<string,any>`	Meta data to use when creating routes for the menu items

SiderRenderFunction

type SiderRenderFunction = (props: {
  items: JSX.Element[];
  logout: React.ReactNode;
  dashboard: React.ReactNode;
  collapsed: boolean;
}) => React.ReactNode;

You can use the render prop to customize the render of the <Sider> without needing to swizzle the whole component.

Using Render Prop

import { Sider } from "@refinedev/antd";

const CustomSider = () => {
  return (
    <Sider
      render={({ items, logout, collapsed }) => {
        return (
          <>
            <div>My Custom Element</div>
            {items}
            {logout}
          </>
        );
      }}
    />
  );
};

<Header> components are designed to render a header at the top of the layout.

Title

<Title> components are designed to render a title inside the <Sider> component. By default, it renders the Refine logo with a link to the index page.

<Footer> components are designed to render a footer at the bottom of the layout.

OffLayoutArea

<OffLayoutArea> components are designed to render elements outside of the layout.

Example

Here's an example of a custom layout, made with help of Refine's hooks and components.

You can find more examples about custom layouts for different UI packages in the examples section.

View Source Code

Run on your local

npm create refine-app@latest -- --example customization-top-menu-layout

Layout Elements​

Layout​

Sider​

SiderRenderFunction​

Header​

Title​

Footer​

OffLayoutArea​

Example​