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

<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

<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 IN YOUR LOCAL

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