# SharePoint Top Navigation Mega Menu with Audience Targeting **URL:** \ **Category:** How-Tos & Manuals for Origami Connect\ **Created:** [June 19, 2024, 10:49pm UTC](https://community.origamiconnect.com/t/sharepoint-top-navigation-mega-menu-with-audience-targeting/703 "2024-06-19T22:49:36Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![origami](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.origamiconnect.com/origami/32/436_2.png) [@origami](https://community.origamiconnect.com/u/origami)\ **Post date:** [June 19, 2024, 10:49pm UTC](https://community.origamiconnect.com/t/sharepoint-top-navigation-mega-menu-with-audience-targeting/703/1 "2024-06-19T22:49:36Z")
> Top Navigation that’s hard to miss! ![TopNav](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/8/840f37a8c32409c7b5a9e6b4f207e63c3569d00c.gif) **Key features** : - Set link description - Set logo size, text size & colors, and background colors - Use custom fonts - Target links based on security groups - Show the same navigation across sites - Hide SharePoint site and hub navigation - Select horizontal or vertical layout > **Initial setup** > > Please follow this video for setup instructions > [ > Configuring Origami Navigation on SharePoint Communication Site - Watch Video > ](https://www.loom.com/share/90160f584ea942118e14067e4a36540c)[![](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/0/0a4b51ba41e5cce264b1db575f215b9260f443ee.gif)](https://www.loom.com/share/90160f584ea942118e14067e4a36540c) > **Target links based on security groups** > > You can make it so navigation links are only shown to specific users based on permission groups. > > Here is how you do that: > **STEP 1:** Setup the list > > - Click **[\*]** → **Site contents** > - Open the list called **Navigation** > - Click **[\*]** → **List settings** > - Click **Advanced settings** as shown below > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/d/d06a16ca61812680387973a7760001b548239774.png) > - Find the **Folders** setting and set the toggle to **Yes** as shown below > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/a/a45f188cd823c41646607f4e04b7f9b911aee162.png) > - Click **Ok** to save settings and go back to the **Navigation** list > > Now you can create folders in the navigation list. > Each folder will become the top navigation label as shown below: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/a/a51c884d85f37b74b1c58d283e969b9a40aa25a2.png) > > **STEP 2:** Move navigation items into respective folders > If you move navigation items into a folder, these items will show as child navigation items. > You can move items into folders by using drag & drop in the navigation list: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/0/08b8b9349d048d4d47566062a3c338601cf69155.png) > > **STEP 3:** Setting folder permissions > Finally, to allow only specific navigation items to be seen by specific groups or users, simply set permissions on a folder or a list item as you’d normally do in SharePoint: > > - Click **Manage access** on a given item as shown below: > > - Grant access to a user or group, like this: > **Show the same navigation across sites** > > You can make it so multiple modern SharePoint Sites show the same navigation without having to re-create it. > > Here is how to set that up: > **STEP 1** : Follow the steps in the **Initial setup** sequence above to set up Origami navigation for your **main site**. > > **STEP 2** : Enable Origami navigation app on all of the sites that will be sharing your main site navigation, let’s call them **children sites**. See **Initial setup** sequence on how to do that. > > **STEP 3** : Point all of your **children sites** to read navigation from the **main site** by going to navigation settings and setting the option shown below to **main site** URL: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/b/b98223a33d55a2352e37a5d0f0c93409c2a5fdc7.png) > Click the check button next to URL to preview what your navigation will look like. If you’re happy with what you’re seeing, click **Save**. > **Using custom fonts** > > ✅ **Available in Top Navigation – Version May 20, 2025** > > You can now have custom fonts for your top navigation labels: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/8/83b25dc6f999a896356102598979040982f9c603.png) > > To select your font, just got to navigation settings as choose the font you like form a picker: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/0/0df0942591b995370f30710fe05d928a66057a09.png) > > If you’d like to upload your own custom font, select **system-ui** as a font in the Origami Top navigation and follow this tutorial to upload your own custom font to SharePoint: > [How to customize SharePoint Theme & Fonts | 2024 Tutorial](https://youtu.be/Y7hQHMmEbcs) > **Changing between horizontal/ vertical layouts** > > ✅ **Available in Top Navigation – Version Jul 9, 2025** > > You can now change the menu layout to horizontal if you have lots of links: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/6/6e27d08d84d259b8b837255fad97c1c0eb707e01.jpeg) > > To select this option, go to Navigation settings and pick the suitable option as shown below: > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/b/b9c487f123955427134def98e41f58af988bcfba.png) > **Enabling breadcrumb** > > ✅ **Available in Top Navigation – Version Nov 12, 2025** > In your intranet the breadcrumb shows just below the site header and shows the navigation path to the page you’re on: > _Example:_ > **Home › Company Resources › Forms & Templates › Pay adjustment request** > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/9/9d0359bf82f5d13cb9e78f76ec1416e91117b9c3.jpeg) > > This helps users: > > - Quickly **understand which section they’re viewing** > - Easily **navigate back** to a parent section (e.g., “Company Resources”) if the label has a landing page > - Stay oriented even after stepping away from the screen > > To enable the breadcrumb site-wide, go to Navigation Settings and toggle “ **Show breadcrumb** ” as shown below: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/1/157f2095ea200a1a3d7bbdb5bbb5c4ed38cf9303.png) > > You can even adjust breadcrumb font size as you wish. > **Enabling language picker** > > If your SharePoint site supports multiple languages and you’ve already enabled the SharePoint multilingual homepage feature, you can display the available languages in the Origami top navigation like this: > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/a/ae5dd9f5605ed7b8f80c2cb55e3df4df1dfda99c.png) > > Enabling this feature is simple: just go to the Origami top navigation settings and toggle it on: > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/b/b85f49955faeaef5deb5e19ec9eaec68c8b04fd7.png) > > **Note:** You must have multilingual settings enabled in SharePoint to see language options. This toggle simply reads the list of available languages configured on your site. **Troubleshooting** > **Uninstalling top navigation** > > ## **Step 1: Remove the Origami Navigation App** > > 1. Click **(\*) → Site contents** > 2. Find the app called **Origami Navigation → (…) → Remove** > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/e/e6d3f79721f1bc2471aae14e0dac6051dceccb7c.png) > 3. Click **Return to classic SharePoint** : > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/c/c1a115fcf7dc5e0ca7c87f4b6ade13ce0bea19d4.png) > 4. Again find the app called **Origami Navigation → (…) → Remove** > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/d/dff0bdcd90b24c98e4321bf9c5a839b684fb65bd.png) > 5. Click **OK** to confirm > > ## **Step 2: Remove the App from the Recycle Bin and Second-Stage Recycle Bin** > > 1. While on the **Site contents** page click the **Recycle bin** link located in the top right hand corner > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/1/1581c663d7244d1686a618211586fe04ba141776.png) > > 2. Find **Origami Navigation** from the list, select it and click **Delete selection** > > 3. Click **(\*) → Site settings** > > 4. Click **Recycle bin** link and scroll all the way down to the bottom (footer) of the page until you see this text: **“Can’t find what you’re looking for? Check the second-stage recycle bin”** > > 5. Click the link **second-stage recycle bin** > > 6. Once more select **Origami Navigation** and click **Delete selection**. This permanently deletes Navigation from the site. > > ## **Step 3: Remove Stored Data** > > **NOTE:** ⚠ With previous steps completed, the navigation is removed and won’t show on the site, but if you were to add the app again, it would read the navigation items and other settings you previously had. Those navigation items and settings are stored in the list called **Navigation**. > To completely remove all navigation data: > > - While on **Site contents** page, find the list called **Navigation → (…) → Remove** > ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/e/ea9294b6fdf416595c5899103c39726af7c6dbe0.png) > > This removes Origami Navigation and its settings (colors, logo, navigation items etc)