How to add a description to SharePoint navigation bar

Question

Hello,

I am seeking guidance on if there is a way to create a mega-menu in SharePoint Microsoft 365 (SharePoint Online) that includes a second line for each link so that we can add a description for each link to help guide our webpage visitors. I have attached an image as an example to show what type of experience we are trying to create with our navigation bar:

I cannot figure out how to get SharePoint to allow more than one line of text to enable this kind of feature. Is there a way to do this with CSS or do you have any suggestions? Please let me know - thank you for your help!

Answer 1

Hi @TylerHein-1492,

In SharePoint Online, the out-of-the-box navigation menu does not support multi-line text or descriptions for each link in a mega-menu. However, there are a few approaches you can consider to achieve this:

Customization using SharePoint Framework (SPFx): You can develop a custom SPFx solution to create a custom navigation menu that supports multi-line text and descriptions. This approach requires development skills and knowledge of SharePoint Framework.

Use a third-party solution: There are third-party SharePoint add-ins and solutions available in the SharePoint App Store that provide advanced navigation capabilities, including multi-line text and descriptions in mega-menus. You can explore these solutions and choose one that meets your requirements.

When implementing any customization, it's important to consider the impact on future updates and compatibility with SharePoint Online. Customizations may require ongoing maintenance and could be affected by SharePoint platform updates.

Before making any changes, it's recommended to thoroughly test the customization in a non-production environment and have a backup of your site in case any issues arise.

Keep in mind that both approaches may require advanced development skills and knowledge of SharePoint customization techniques.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng