ANVIL · Navigation
Spec
| Touch target | 44px min height for interactive items |
|---|---|
| Breadcrumb text | 14px (--fs-small) + chevron separator icon |
| Stepper marker | 24x24px + label, horizontal scroll on narrow widths |
| Pagination item | Use Button component classes (outline/secondary), 44px min touch area |
| Bottom navigation | 48px container min height, icon + text |
| Accessibility | Use nav landmarks with aria-label, aria-current for current page/step, tablist roles for tabs |
Breadcrumb
Stepper
Use aria-current="step" for the active step
- Address
- Shipping
- Payment
- Review
Pagination
Tabs
Active tab content example.