Navigation Patterns

Navigation is the structural frame of an interface. It communicates what the system contains, where the user is, and where they can go. The pattern chosen shapes every other spatial decision.

Tabs

Tabs organise content into parallel sections at the same level of hierarchy. They are appropriate when users need to switch frequently between related views — settings panels, data views, profile sections. Tabs should contain peer-level content: each tab should be an alternative, not a step in a sequence. Use tabs only when there are 2–7 items; more than that exceeds what can be shown without overflow or wrapping. The selected tab must be clearly differentiated from inactive tabs.

Sidebar navigation

A sidebar is appropriate for deep hierarchies with many items — product sections, documentation, dashboards. It stays visible as the user navigates, giving persistent access to all sections. Collapsible sidebars trade discoverability for screen space — use them only when screen real estate is genuinely constrained, and ensure the collapsed state still communicates the navigation exists.

Breadcrumbs

Breadcrumbs communicate the current location within a hierarchy and provide shortcut access to ancestor pages. They are supplementary navigation — they should never be the primary means of moving through the system. Breadcrumbs are most useful in deep hierarchies (three or more levels) where users may have arrived at a page from search or an external link and need to understand where they are. They should always reflect the structural path, not the browsing history.

The current state

Every navigation pattern must clearly communicate the current location. An active tab, a highlighted sidebar item, or a bold breadcrumb ancestor are all correct. Without a current-state indicator, the user cannot answer “where am I?” — the most fundamental question of navigation.

Navigation and accessibility

Each navigation pattern has specific keyboard and ARIA requirements.

Tabs should be implemented with the role="tablist", role="tab", and role="tabpanel" ARIA pattern. Focus moves into the tablist with Tab; arrow keys then switch between tabs within the list. This is the expected keyboard contract: Tab navigates between landmarks, arrows navigate within them. Tabs implemented as regular links do not need the ARIA pattern, but then do not support the arrow-key navigation users expect from tabs.

Sidebar navigation is a landmark — wrap it in <nav> with a distinct aria-label (e.g., aria-label="Main navigation") so screen reader users can navigate directly to it. If the sidebar has expand/collapse groups, each group control needs aria-expanded state updates. Current page: use aria-current="page" on the active link.

Breadcrumbs should be implemented as an ordered list inside a <nav aria-label="Breadcrumb">. The current page item gets aria-current="page". This structure enables screen readers to announce “Breadcrumb navigation” and enumerate the trail. See landmark regions for how navigation elements fit into the full page structure.

The takeaway

Choose a navigation pattern based on the depth and structure of the content, not visual preference. Tabs for flat, parallel sections. Sidebar for deep hierarchies. Breadcrumbs as supplementary location indicators. Whatever pattern you choose, make the current location unambiguous — visually and programmatically.