Forum Discussion
Design navigation
Hello
at the moment this is what my navigation bar looks like:
The list of vendors is so long that you have to scroll down to see the last one. Additionally, the last label "open source" comes under all the vendors because there is a limit of 4 columns.
Is there a possibility to create such a design for the navigation bar?
The first 2 columns would the vendors, and the 4 other categories would be in the last 2 colunms?
Thank you in advance!
Louis
louisquinet You can create such navigation menu using SharePoint mega menu navigation:
Not sure if same heading menu can span over two columns using SharePoint out of the box capabilities. But I think you can break vendors list in 2 columns by adding "Vendors" label in both the columns.
Documentation: Create a mega menu on SharePoint communication sites and hub sites
If SharePoint default functionalities are not working for you, you can create custom menu using SPFx. Check:
- Overview of the SharePoint Framework
- Build your first SharePoint Framework Extension
- React Mega Menu Application Customizer Extension - SPFx sample with code
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- Here is another thought. The very long list of vendors is clearly not a great user experience. And it will get more complicated as you add more vendors. As a general best practice, you want to keep the total number of links in your navigation to fewer than 100 (for performance reasons) and 499 (capacity). But even 100 links can be difficult to manage. One option to consider is to have a link that goes to a page where you can display all the vendors and links. The other is to have navigation links to your top or "featured" vendors (10-15) and then have a link to a page that lists all vendors and allows the reader to sort and filter by name or characteristic. Here is a link to some guidance on the Microsoft Learn site: https://learn.microsoft.com/en-us/sharepoint/plan-navigation-modern-experience. (In the spirit of full disclosure, I wrote the guidance.) I would encourage you to think about not just if you can do what you are trying to do but also whether it is a good idea or if there might be alternative approaches to get the same outcome.
