curious-teal
curious-teal•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
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
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
kapa.ai•2y ago
<@1031576840931913859> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphire
adverse-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
curious-teal
curious-tealOP•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?
curious-teal
curious-tealOP•2y ago
thanks hi, How could you change the logo in the MantineHeader in mantine?
adverse-sapphire
adverse-sapphire•2y ago
| refine
component from refine, defines the overall structure and layout of a web page.