Skip to main content
Version: 3.xx.xx


There are 2 ways that will allow you to customize your <Sider /> component if you need it.

You can access the logout, dashboard, items elements and collapsed state that we use in our default Sider component by using render properties. Customize it to your needs or you can create a custom <Sider /> component and use it either by passing it to <Refine /> or using a Custom Layout.

Customize Sider by Using render property​


The Menu.Item component gives you an implemention ready component compatible with Sider menu items. If you want to add anything else to your Sider component, you can use the collapsed state to manage your component.

Recreating the Default Sider Menu​

You can also customize your Sider component by creating the CustomSider component.

When you examine the code of the live-preview example below, you will see the same code that we used for the default sider component. You can create a customized CustomSider component for yourself by following this code.


If you want to create a multi-level menu, you can take a look at this multi-level menu example and also here is the guide.

useLogout provides the logout functionality.


You can further customize the Sider and its appearance.
Refer to Ant Design docs for more detailed information about Sider. β†’