Use side navigation for local section hierarchy, global navigation for product-wide destinations, and tabs for a small set of sibling panels inside one view.
Use side navigation for local section hierarchy, global navigation for product-wide destinations, and tabs for a small set of sibling panels inside one view.
Practice the judgment: Imagine this situation: The side navigation repeats global destinations and makes users choose between two competing primary nav systems. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Side navigation | Global navigation | Tabs |
|---|---|---|---|
| UI or UX | UI + UX - Persistent local hierarchy at the side of content | UI + UX - Persistent top-level navigation shell | UI + UX - Section-switching component |
| UI guidance | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. |
| UX guidance | Help the person reach a clear task outcome. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. |
| Good UI | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. |
| Bad UI | The side navigation highlights Settings while the page heading is Audit log. | A crowded row mixes every page, account action, language selector, and sign-out link. | Tabs wrap unpredictably or look like unrelated buttons. |
| Good UX | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. |
| Bad UX | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Navigation opens external or utility destinations as if they were service sections. | Using tabs as primary navigation to unrelated pages. |
| Best fit | A product area has several related pages arranged in a visible hierarchy. | Users revisit several top-level product or service areas. | Users switch between sibling panels frequently. |
| Avoid when | The destinations are top-level product areas that belong in global navigation. | The flow has a single ordered transaction where navigation would distract or cause abandonment. | The destinations are unrelated pages. |
| Required state | Default state with the local section hierarchy visible beside content. | Default state with product or service identity and top-level links. | Default active tab and visible panel. |
| Accessibility burden | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. | Use a labeled navigation landmark for primary navigation. | Expose the active tab and associated panel. |
| Common misuse | Duplicating global navigation links in the side navigation. | Listing every page or admin object in the global nav. | Using tabs as a primary site navigation system. |