There are 2 ways that will allow you to customize your
<Sider /> component if you need it.
You can access the
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.
You can swizzle this component to customize it with the refine CLI
Customize Sider by Using
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
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.
You can also run the
swizzle command to export the source code of the default sider component. Refer to refine CLI for more information.
useLogout provides the logout functionality.
useLogout hook can only be used if the
authProvider is provided.
Refer to authProvider docs for more detailed information. →
Refer to useLogout docs for more detailed information. →
You can further customize the Sider and its appearance.
Refer to Ant Design docs for more detailed information about Sider. →