Loading…
Loading…
• Local navigation provides links within a specific section or subsection of a site, complementing global navigation. • It helps users explore related content without returning to the top level. • Common implementations include sidebar menus, in-page tabs, and section-specific sub-navigation bars.
stellae.design
Local Navigation (also called section navigation or sub-navigation) provides navigation within a specific area of a website or application, showing the pages and content available within the current section. While global navigation moves users between major sections, local navigation helps them explore within a section. It adapts to context — different sections may have different local navigation structures reflecting their unique content hierarchy. Local navigation is essential for deep content sites where global navigation alone can't provide access to all pages.
Local navigation refers to the navigation system within a specific section or subsection of a website or application — the links, tabs, or menus that help users move between pages or views within a bounded context, as opposed to global navigation that spans the entire site or utility navigation that provides account and tool access. This navigation layer matters because once a user has navigated to a section of interest via global navigation, they need a different set of wayfinding cues to explore the content within that section — global navigation tells users what major areas exist, while local navigation tells users what is available within the area they have chosen, and without clear local navigation users feel lost even when they are in the right section. Local navigation is also where the majority of task completion happens: users spend most of their time within sections rather than jumping between them, so the quality of local navigation directly determines how efficiently users can accomplish the goals that brought them to that section in the first place.
Stripe's API documentation uses a persistent left sidebar as local navigation within the documentation section, displaying a hierarchical list of all documentation topics organized by category — payments, billing, connect, identity — with expandable subsections that reveal specific guide and reference pages within each category. The sidebar highlights the currently viewed page and maintains scroll position independently from the main content, so users reading a long documentation page can glance at the sidebar to see where they are within the broader documentation structure and jump to related topics without scrolling back to the top. The local navigation is completely independent from Stripe's global navigation, which remains fixed at the top and provides access to the dashboard, support, and account — this separation makes it clear that the sidebar navigates within documentation while the header navigates across Stripe's entire product.
Apple's product pages — for iPhone, Mac, iPad — use a sticky horizontal tab bar as local navigation that appears below the global navigation, offering tabs like Overview, Specs, Compare, and Accessories that let users explore different facets of the same product without leaving the product context. The tabs scroll smoothly to the relevant content section on the same page, and the active tab updates as the user scrolls through the content, providing continuous wayfinding feedback about which section of the product story the user is currently viewing. This local navigation pattern is specific to product pages and does not appear on other sections of Apple's site, demonstrating the principle that local navigation should be tailored to the content type rather than forced into a site-wide template.
A software help center organizes its articles into categories accessible from the global navigation, but once a user enters a category like 'Billing' and opens an article, there is no local navigation showing what other billing articles exist — the user can see only the current article and must click the browser's back button to return to the category listing, then select another article, wait for it to load, and repeat this cycle for every article they want to read. Related articles are occasionally listed at the bottom of some pages as plain text links with no visual hierarchy or categorization, but this is inconsistent and often includes articles from completely unrelated categories, providing no coherent sense of what billing content is available. Users who need to understand the full scope of billing documentation must manually visit every article and mentally reconstruct the content map that local navigation should have provided as a persistent sidebar or table of contents.
• The most common mistake is not providing local navigation at all, assuming that global navigation and in-page links are sufficient — this leaves users who have navigated to a section without a map of what that section contains, forcing them to rely on the back button and repeated page loads to explore content that should be browsable from a persistent navigation element. Another frequent error is making local navigation visually indistinguishable from global navigation, which confuses users about the scope of their navigation action — when local and global navigation use the same styling, position, and visual treatment, users cannot predict whether clicking an item will move them within their current context or transport them to an entirely different section of the site. Teams also commonly fail to synchronize local navigation state with the URL, creating a situation where switching between local tabs or sections changes the visible content but does not update the browser address — this breaks deep linking, bookmarking, sharing, and the back button, all of which users rely on heavily for navigation within content-rich sections.
Was this article helpful?