Navigation
Components for moving between pages and sections.
Components
| Component | Purpose |
|---|---|
| Tabs | Switch between content sections in one view |
| Bottom tab bar (iOS app mobile) | Main mobile navigation at the bottom of the screen |
| Stepper | Show progress through multi-step flows |
| Breadcrumbs | Show where the user is in the page hierarchy |
| Menubar | Horizontal bar of dropdown menus |
| Side navigation | Section-level navigation in a sidebar |
| Tree view | Expandable list for nested structures |
| Pagination | Move between pages of results |
| Sheet | Slide-out panel from any screen edge |
Tabs
Switch between content sections without changing the page. Full-width layout, underline on the active tab.
- 48px height meets minimum touch target
- Keyboard navigable with arrow keys
- Use
variant="line"andsize="lg"for the underline style shown here
Bottom tab bar (iOS app mobile)
Fixed to the bottom of the screen. Always visible while scrolling.
- 4-5 tabs max — more gets too crowded
- Always show icons with labels. Icon-only isn't clear enough.
- Supports notification badges (number or dot)
Stepper
Shows progress through multi-step flows. Three variants: circle for longer flows (4+ steps), line for short ones (2-3 steps), and vertical line for timeline tracking with timestamps.
Breadcrumbs
Shows the user's location in the page hierarchy. The last item is the current page — plain text, not a link.
- Collapses to ellipsis on mobile when the path gets deep
- Separator between items (chevron or slash)
Menubar
Horizontal row of dropdown menus, usually at the top of a view. Each item opens a grouped set of actions.
- Active menu uses primary color with a subtle background tint
- Supports checkable items and radio groups inside menus
Side navigation
Sidebar navigation for sections within a page or app. Active item gets a left border in primary color.
- Supports nested sections with indentation
- Fixed on desktop, collapsible on mobile
Tree view
Expandable, nested list — good for file browsers, account structures, or category trees.
- Chevron icons show which nodes can expand
- Indentation shows depth
Pagination
Page-by-page navigation for long result sets. Previous/Next buttons on each end, ellipsis for large ranges.
Sheet
Slide-out panel from any edge of the screen. Bottom sheet is the main mobile pattern for Senco — used for navigation drawers, detail panels, and filters.
- Overlay backdrop closes the sheet on tap
- Sizes: sm, default, lg, full
Design and accessibility
All navigation components need to work with keyboards — arrow keys for moving between items, Enter or Space to select. Mark the current page or section with aria-current so screen readers can announce it. Use <nav> landmarks with descriptive aria-label values for Tabs, Bottom tab bar, and Breadcrumbs. Navigation order in the DOM should match visual order on screen.