Explore apps for invoice automationIntegrate CRM with CLM solutions
Help & Support
Elevate Your Agents with AgentExchange Solutions
Easily enhance Agentforce with pre-built AI solutions from AgentExchange. Browse, install, and deploy agents, actions, and apps directly into your environment. Tell Me More
Have Questions?
Multi-Level Navigation Menus for Experience Cloud (Aura/LWR)
Manage Multi-Level navigation menus, and render them in your Community!
- Requires
- Sales Cloud
You can configure up to 6 levels of depth in your menus, control the look and feel with some styling configuration, horizontal vs vertical (tree) vs Drill Down vs hamburger presentation, language filtering support, and much more!
Rating
Reputation
MVP
Recognized by Salesforce for their leadership, expertise, and generosity
Top Reviewer
Contribute reviews that encourage conversation and help others make informed decisions
Ranger
Lifelong learners who have earned the Ranger rank or higher on Trailhead
Showing 10 of 24 Reviews
Issue with guest user access
Till last year this was working fine. Then we start seeing 2 versions of component. Deprecated one and new one. We are using it for aura site.as soon as we dropped new one on our site it got disappeared for guest user. after doing all the setting as creating sharing rule(shared to profile based on the name), giving class access all was done but it couldn't solve the problem. some trial and error concluded that when you don't select Language Filter i.e. set it to none it gets loaded for guest user also. but being multi language this shows all the language to guest user. We are kind of stuck for guest user view and it's hard stop for us for now.
Great application
I want to express my appreciation for the Multi-Level Navigation Menus for Experience Cloud—it's incredibly useful for creating custom menus with various combinations, especially when time is limited. Thank you for keeping it free! I do have a small query regarding a specific use case. We've set up menu and sub-menu items (up to 3 levels) and associated them with respective topics. However, when I click on a sub-menu item at level 2, the page URL changes, and it displays articles related to the associated topics. The issue is that the menu collapses, making it difficult to determine which sub-menu I was redirected from. Is there a way to maintain the visibility of the menu structure while navigating to the new page? Thanks again for your work on this application!
How to add the Menu to an aura component
Hi George Great tool, but I have one problem and I hope that you can help me. You write: "This component can be called in the markup of any Aura lightning component. An Aura lightning component serving as a custom theme layout would make it possible to swap out the standard navigation menu with this navigation menu component instead." I am trying to do just that, but I can´t figure out the syntax how to call the menu in my aura component. I tried it like this: <ccnavmenus:navMenu2 aura:id="theVerticalMenu" /> but it doesn´t show up. What am I doing wrong? Thanks for your help Holger
Hi George, I spent a few days redesigning a website and integrating your menu. I am very happy with all the options the configuration gives me and the ability to override the CSS so it looks great in dark mode too. There is only one thing my client asked me to do and I don't know how to do it. The chevron that is on the left side of a category in vertical mode should be on the right side. So the button <button ccnavmenus-treeitem_treeitem ... and the span <span ccnavmenus-treeitem_treeitem should swap their positions. And the chevron would have to be mirrored when the category is collapsed. Any idea how to do this? Thanks for your help Holger
Hi George, thanks for the quick reply. I have dropped it into the customHeader, but I would like to have a few links/buttons next to the hamburger. Therefore I think I need it in a component, were I have it in a grid. Or is there another way to aline things next to the hamburger? Thanks for your help!
Menu Mult-level not Show in Experience Cloud sites
Hi George We trying to show menu in experience sites but not working with Customer Community User logged. Works good in Builder. I think that because the administrator. We already grant access for all Community profiles and FLS for all of then (Menu and Menu Item fields). Grant access all apex class as well. Can you help us please? Thanks
Very practical and user friendly, but an issue with the mega menu
Hello and thank you for that package! However we're currently facing an issue: We've been having a good experience with implementing the solution for our client but have had an issue when using the mega menu where none of the links were clickable. For context: we're in Summer '24 Patch 18.2, in an Aura experience cloud site, Theme is Build your own, we've got a custom theme layout component (issue is still there even with standard theme layout I've tried). A piece of code is preventing click propagation in megaNavigationList.js, handleNavClick() function, line 153. The component can't read the event.target?.role of the link (but somehow can when user clicks the icon). A workaround we found was to enable "Use Lightning Web Security for Lightning web components and Aura components" in Setup > Session Settings, but there's nothing in your documentation about that and it's an org wide setting which is not ideal for us to change as it could impact other parts of the org. Could you please look into this ? A fix/guidance would be greatly appreciated! We can also get in touch if you need more information. Thanks, Quentin
Configurable comprehensive solution to multi-level navigation
This solution is fantastic. We have been able to customize this very easily to fit the look and feel of our help site. Please note, there are a couple of CSS configurations that took some time to figure out, so I will share those in this review. To get the active item to highlight the way we wanted, here's the CSS override we used: ccnavmenus-nav-menu c-tree-item[aria-selected=true] { border-left: 4px var(--dxp-g-brand) solid; background-color: #E7EFFF; font-weight: 700; display: flex; } To get the hover behavior to work the way we wanted, here's the CSS we used: .slds-tree__item:hover[ccnavmenus-treeItem_treeItem] { background-color: #E7EFFF !important; box-shadow: none !important; display: flex; }
This is a Great Component
Finally, I was able to understand how should I work on this application without writing codes. This deserves a 5 star rating but I have few concerns still. If any of these can be done just kindly share it. 1. Is there a way to setup this Multi-level menu (entirely the same configuration) but only Vertical or as a 'Side Navigation'? Btw, I'm using LWR framework with 'Build Your Own' theme. 2. Is there a way to override the menu item's 'Hovering' style or its color to something different? 3. On this component settings, better to have an option to change Text size as well. I see that you can 'Override Font Family' but manually, I guess its better if its available as a 'List'. Anyways, thank you for the hardwork on this app.
thanks for the review and questions Jason! 1. Yes you can do a vertical only / side navigation if you set the following: Menu Mode: Default Vertical Mode: On Hamburger Menu Mode: Off 2. You can override the styling by targeting the markup within the component (inspect the page and target classes etc.), then place those styles in the <head> markup of the site in builder. 3. You can do this with CSS Overrides, same method as #2.
How to replace the standard navigation menu with Multilevel navigation menu?
I've two doubts: 1. How to override the standard navigation menu with Multilevel navigation menu? 2. I want to assign some pages like Home, Topics. How to assign/set tabs in menu item. Instead of javascript: void(0);
1. In an Aura template, you will need to do so programmatically with a custom lightning component acting as a custom theme layout. Unfortunately the platform does not allow for this to be done with configuration. 2. If I'm understanding this correctly, in the Lightning Experience (not Experience Builder) use the App Launcher to go to the "Experience Cloud Menus" app, and you should be able to configure your menu there. You will need to add or edit the menu items you want and provide either relative or full urls.
Works Great But...
It's a little clunky in the app - you have to manually put a number to denote the position. It works, but it's a little tedious when you're working with multiple levels. My biggest issue: I don't see a way to edit the text size and spacing once it's in the Experience Builder. The text defaults to a really tiny size, and if you're using a menu that doesn't have many options, it would be great to make the menu thicker/make the text bigger. Is there a way to do that?
Really Helpful!
I liked the app so far, easy to use. I have 2 questions, not sure even it is possible or not, otherwise this deserves 5 star easily Q1 - Can it retrieve the topics automatically? (Based on the current experience site) or do we need to create each menu items according to desired topics? The use case is, that we have more than 1k menu items technically, and ofcourse we do not want to drill it down so deep, if it is not possible automatically, then I can create on high-level only. Rather pointing it towards article, it highlights the topic/subtopics... Q2 - The URL under configuration shows "javascript:void(0);", can we automate it? Or do we need to provide a specific URL which redirects to X page? Thanks
I'm not sure I understand what you mean here...highlighting a menu item works off of the URL. So if there's a match on the URL, the menu item is highlighted, if it's a tree, it's highlighted and its parent expanded. That's how it should work. If you're looking at something different, please explain what the url is for M1, and what the url is for A1, and what the logic should be to highlight a menu item. The answer may end up being that it's probably different logic and that customization of the code would be required to achieve that. (The code is open-source so it can be customized)
Thanks George for the clarification! Now I understood. For highlighting current menu item, we can use this CSS code, and it works as mentioned in the document (if URL matches) --------- ccnavmenus-nav-menu c-tree-item[aria-selected=true] { border-bottom: 1px var(--dxp-g-brand) solid; display: flex; } --------- What about this use case regarding highlighting the menu item? If I have, Menu Item - M1-1 which has a related Article - A1 I do not want to show A1 to the end user (Because it can have endless child items, so only high-level, basically only *topics* and NOT subtopics/articles) If I am on the page A1, can it highlight MI-1? with some CSS/condition logic magic? This helps end user to understand on which Topic Page he/she is in!
Hi Dharmin, thanks for the feedback! 1. It does not retrieve the topics automatically, and this is to allow you to create a deeper hierarchy of topics if needed. Otherwise the platform limits you to 2 levels. 2. javascript: void(0); is a placeholder for menu items that don't navigate anywhere. If you want the click on a menu item to go to a page, you will have to set the url for the page to go to. Otherwise, I'm not sure what you mean by "automate it".
Hi Neeraj - I'm not sure I fully understand the issue, but if there's a bug I'd like the chance to address it. Would you mind reaching out to me on DM in the trailblazer community to share some more details?