| 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 | Use side navigation to help users move within a complex section without losing the current page's position in that section. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Help users switch between sibling sections in the same page context without changing routes or losing local work. |
| 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 | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. | 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. | Users switch between sibling sections without leaving page context or losing panel-local notes. |
| Bad UX | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Switching top-level sections clears filters or drafts without notice. | 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 product only has a few pages and does not need a hierarchy. | 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. |