ComponentsPremium
Navigation
Primary and secondary navigation patterns
Navigation
Navigation patterns include top nav, side nav, and breadcrumb navigation.
Example - Top nav
function TopNav() {
return (
<nav aria-label="Primary" className="top-nav">
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/pricing">Pricing</a>
<a href="/docs">Docs</a>
</nav>
);
}Accessibility
- Provide aria-current on the active link.
- Ensure focus styles are visible.