Navegation

How to put the sider menu on the top navegation using ant design

2 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a top navigation menu using Ant Design in a Refine application, you can use the useMenu hook to get the menu items and implement your own horizontal navigation. Here's a general idea of how you can do it: 1. Use the useMenu hook to get the menu items. This hook gives you the resources you need to create your menu.

import { useMenu } from "@refinedev/core";  

export const TopNav: React.FC = () => {  
 const { menuItems, selectedKey, defaultOpenKeys } = useMenu();  

 // Here create your TopNav to your UI choice  
};

import { useMenu } from "@refinedev/core";  

export const TopNav: React.FC = () => {  
 const { menuItems, selectedKey, defaultOpenKeys } = useMenu();  

 // Here create your TopNav to your UI choice  
};

2. Implement your own horizontal navigation using Ant Design's layout and menu components. You can refer to Ant Design's layout examples (https://ant.design/components/layout#components-layout-demo-fixed) for guidance. 3. Replace the default Sider component with your custom TopNav component in your layout.

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  

import { TopNav } from "./TopNav";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => <TopNav />}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  

import { TopNav } from "./TopNav";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => <TopNav />}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

Please note that the code snippets above are just a general guide. You'll need to implement the actual rendering of the menu items in your TopNav component based on your UI requirements. For more detailed examples, you can check out Refine's Top Menu Layout example (https://refine.dev/docs/examples/customization/topMenuLayout/) and the useMenu hook usage (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/#usage) in the documentation. Sources: - Discord support thread: sider with horizontal mode > Answers (https://discord.com/channels/837692625737613362/1166296679935381504) - Documentation > Docs > Ui-integrations > Ant-design > Components > <ThemedLayout /> > Props > Sider Part 1 (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#sider) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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