Skip to main content
Version: 2.xx.xx

Custom 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.

Usage

Let's look at an example of modifying the default layout to have a top menu layout.

/src/App.tsx
import { Refine, AntdLayout, Link } from "@pankod/refine";
import routerProvider from "@pankod/refine-react-router";
import dataProvider from "@pankod/refine-simple-rest";
import "@pankod/refine/dist/styles.min.css";

import { PostList } from "pages/posts";

import { CustomSider } from "components";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={({ children, Footer, OffLayoutArea }) => (
<AntdLayout>
<AntdLayout.Header>
<CustomSider />
</AntdLayout.Header>
<AntdLayout.Content>
<AntdLayout.Content>
<div style={{ padding: 24, minHeight: 360 }}>
{children}
</div>
</AntdLayout.Content>
<Footer />
</AntdLayout.Content>
<OffLayoutArea />
</AntdLayout>
)}
Title={() => (
<Link to="/" style={{ float: "left", marginRight: "10px" }}>
<img src="/refine.svg" alt="Refine" />
</Link>
)}
/>
);
};

export default App;

Here, we override the <Title> and <Layout> components. When we override <Layout>, we put the <CustomSider> (instead of the <Sider> that was provided to <Layout> to render it by default) on top of <AntdLayout>.

So, we just provided a custom <Sider>. Here's our custom sider that looks horizontal, instead of the default vertical one:

/src/components/sider/index.tsx
import { Link, Menu, useMenu, useTitle } from "@pankod/refine";

export const CustomSider: React.FC = () => {
const Title = useTitle();
const { menuItems, selectedKey } = useMenu();

return (
<>
<Title collapsed={false} />
<Menu selectedKeys={[selectedKey]} mode="horizontal">
{menuItems.map(({ icon, route, label }) => (
<Menu.Item key={route} icon={icon}>
<Link to={route}>{label}</Link>
</Menu.Item>
))}
</Menu>
</>
);
};

Here, we use useMenu hook to get the list of current resources and print it.

info

By default, <Sider> is responsible for rendering <Title>. It gets this component (configured by <Refine> and/or <LayoutWrapper>) by useTitle hook.

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. โ†’

Live Codesandbox Example

Here's how it looks in the end: