title: Navigation description: 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.