Design System Glossary

Navigation Patterns

Navigation patterns are the structures that let users move through a Design System or application — breadcrumbs, tabs, sidebars, menus, pagination. Each solves a different wayfinding problem.

Breadcrumbs show the user's location in a hierarchy. They answer "where am I?" and let users jump up the tree. Most useful for deep, taxonomic sites (e-commerce, help systems). In a Design System, breadcrumbs are usually simple: a list of links with separators.

Tabs group related content under labeled sections. Only one tab is visible at a time. Useful when content is mutually exclusive or when space is constrained. The trap: too many tabs (usually more than 5–6) suggests your content structure is wrong. A Design System Tab component usually manages which is active, keyboard navigation, and focus management.

Sidebars and main navigation structure large applications. Sidebars offer persistent access to top-level sections; top navigation works for smaller structures. The choice depends on content depth and frequency of switching. A Design System usually provides Nav or SideNav as a compound component with active states, icons, and collapse support.

Menus (dropdown, context) provide quick access to actions without taking up permanent space. Menus often use the compound pattern — Menu wraps MenuTrigger and MenuItems. Accessibility matters hugely here: keyboard users must be able to navigate and select without a mouse.

Pagination breaks large datasets into pages. Good for search results, tables, lists. The Design System usually provides Pagination as a reusable component that emits page-change events but doesn't fetch data itself — keeping it headless.

The pattern to pick depends on the task structure, content depth, and device. A good Design System documents all these with decision trees and usage guidelines.