Navigation
Top Nav Item
Top Nav Item is a single navigation link within a horizontal Top Navigation bar.
State (Default/Hover/Active/Disabled) — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Top Nav Item is a single navigation link within a horizontal Top Navigation bar.
When to use
Primary app/site navigation in a horizontal header bar.
When not to use
Vertical/persistent app navigation with many items — use Sidebar Nav Item.
Accessibility
Same aria-current="page" requirement as Sidebar Nav Item for the Active state.
Common mistakes
Relying on color alone for the Active state — pairs action/primary color with Bold weight deliberately.
Properties
State as variants. Label (text).
Tokens used
semantic/text/secondarysemantic/action/primary