Change Logo in default Sidebar
Hey where can I change the Sidebar Logo in refine? I cant find it ...
![No description](https://cdn.answeroverflow.com/1087280968211124244/image.png)
31 Replies
Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
To change the logo in the default Sidebar in refine, you need to customize the default Sider. The
<Title>
component is responsible for rendering the logo inside the <Sider>
component.
First, check out the example on how to customize the Sider Menu here (https://refine.dev/docs/examples/customization/customSider/).
Then, in your custom Sider component, replace the default refine logo with your own logo. Here's an example of how to do this:
Finally, use your custom Sider component in your refine configuration.
----------------------<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
vicious-gold•2y ago
if you are using
refine@3
you can change title like this:
https://refine.dev/docs/3.xx.xx/api-reference/core/components/refine-config/#title
if you are using refine@4 you use title prop of layout
helpful-purple•2y ago
Yes i am using refine@4.
Can you give me more specific code i dont understand how to do this
vicious-gold•2y ago
when you use
create refine-app
we are adding default <Layout>
according to your selected UI package.
this is generated code from create refine-app
when selected MUI.
app.tsx
You can use Layout
component's Title prop to changehelpful-purple•2y ago
![No description](https://cdn.answeroverflow.com/1087291364208816128/image.png)
helpful-purple•2y ago
Do you mean this?
vicious-gold•2y ago
oh sorry. are u using nextjs ?
helpful-purple•2y ago
nooo
typescript.tsx
vicious-gold•2y ago
yes you can use this layout component
helpful-purple•2y ago
Okey wish me good luck, thx you Alican
It doesnt work, I dont unterstand
vicious-gold•2y ago
i will debug and return you
helpful-purple•2y ago
Ey Alican, we are using next.js
Sorry
evident-indigo•2y ago
we are using nextjs and mui. We copied the pages from inferencer and just want to change the Sidebar Icon (when collapsed and when opened). In V3 this was very easy, now I cant find it 😄
vicious-gold•2y ago
Hi, i created nextjs project from scratch
you can use this code snippet