quickest-silver•2y ago

Refine to navigator resourse,

Hi dev's, how are you, how can I add elements to the navigation menu but that are not from the crud, that only direct me to a page with next and rufine

8 Replies

kapa.ai•2y ago

Hi @efren6799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Hi! You can add an extra navigation link to the Sider component in refine by using the render property of the <Sider> component. The render property is a function that receives an object with the items and logout properties. The items property is the list of navigation items and the logout property is the logout button. Here's an example using Ant Design:

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="https://your-custom-page-url/">👋 Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="https://your-custom-page-url/">👋 Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

Replace https://your-custom-page-url/ with the URL of the page you want to navigate to. This example is for Ant Design, but you can adapt it to other UI libraries as well. Source: https://refine.dev/docs/faq (https://refine.dev/docs/faq) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

FAQ | refine

How can I change the form data before submitting it to the API?

kapa.ai•2y ago

<@1031576840931913859> kapa.ai is still learning and improving, please let us how it did by reacting below

absent-sapphire•2y ago

i don't quite understand. can you example me this " that only direct me to a page with next and refine" in more detail please i believe this example can help you. https://refine.dev/docs/examples/customPages/ this is the sider navigation file https://codesandbox.io/s/github/refinedev/refine/tree/master/examples/with-custom-pages?from-embed=&file=/src/components/sider.tsx:339-384

quickest-silver•2y ago

I am sorry, I already saw how to do it, I was a little confused How can I put icons in the navigation menu?

absent-sapphire•2y ago

this is the custom page icon https://codesandbox.io/s/github/refinedev/refine/tree/master/examples/with-custom-pages?from-embed=&file=/src/components/sider.tsx:546-599 or you can give any icon from resource https://codesandbox.io/s/admiring-firefly-xv8jec?file=/src/App.tsx:2151-2196

quickest-silver•2y ago

thanks hi, How could you change the logo in the MantineHeader in mantine?

absent-sapphire•2y ago

https://refine.dev/docs/api-reference/mantine/components/mantine-themed-layout/#title

| refine

component from refine, defines the overall structure and layout of a web page.