Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx

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.

PropTypeDescription
SiderReact.FCComponent to render menu aside
HeaderReact.FCComponent to render at the top of the layout
TitleReact.FCComponent to render inside <Sider>
FooterReact.FCComponent to render at the bottom of the layout
OffLayoutAreaReact.FCComponent to render outside of the layout
childrenReactNodePage 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.

PropTypeDescription
TitleReact.FCComponent to render at the top
renderSiderRenderFunctionFunction to render the menu items and other elements inside the <Sider>
metaRecord<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.

Run on your local
npm create refine-app@latest -- --example customization-top-menu-layout