In this post we introduce Smarter Navigation as our tree-based navigation for the SharePoint Modern UI. The extension mirrors every list and folder in a hierarchical view that keeps even complex project spaces manageable. It bundles four core features that we explore below.
Built as a SharePoint Extension
We implemented the navigation as a SharePoint Application Customizer extension. This approach lets us inject scripts on a page, access well-known placeholders for HTML elements, and augment them with our own rendering. Microsoft Docs explains the concept in detail in the article on using page placeholders with extensions. We retrieve the navigation placeholder via JavaScript and replace it with our custom component that renders the menu.
For the user interface we rely on Office UI Fabric (now Fluent UI) to keep styling consistent and modern.
Navigation as a Tree Structure
List data can be stored in a web property as JSON, which even allows nested lists that SharePoint does not offer out of the box. You can tailor that structure with our Office add-in Management 4 SharePoint – the Excel add-in for managing your SharePoint projects. We read the data and display the list and folder hierarchy inside the Office UI Fabric Nav component, where every node can expand on demand.
Performance-optimized loading
We only load child lists and folders once someone expands a node. That lazy-loading approach keeps the navigation snappy because only the required elements travel across the wire. The current list or folder is highlighted so people instantly know where they are in the hierarchy.
Comparison with the standard navigation
The following comparison illustrates how much faster it is to find folders and libraries when the complete structure is visible instead of diving into every level manually.
Without the tree you have to click through each folder, which quickly costs valuable time.
Search for folders by name
We added a search field above the navigation to locate folders immediately. After you enter a name we query the SharePoint API for every folder across all lists and check for matches. When we find one, the navigation automatically expands every parent list and selects the matching folder.
Area for personal favorites
The third feature is a dedicated favorites section. Users can bookmark frequently used lists or folders and open them with one click. Each favorite appears in a list with its target URL, so the tool can navigate directly to the selected destination. Clicking the Delete icon removes a favorite again. We store the entries per user as JSON inside a SharePoint list so they follow you across devices.
Switch to another project
The fourth feature lets users switch projects while staying in the same folder context. Pick another project from the dropdown and the navigation jumps straight to the identical path. If you are working in Project1 inside the library 5.ProjectCommunication and choose Project2, you will land in the same library of the second project instantly. Anyone who works across multiple projects gains a remarkable productivity boost.
Get in touch
Interested in learning more about our navigation? Contact us and we will gladly walk you through the solution.
