Skip to content

Navigation

Rule

Use a link if you want to navigate between page and not a button

  • Screen reader compatibility - Screen readers announce links as navigational elements, while buttons are announced as interactive controls.
  • Keyboard navigation - Links are automatically included in tab order and can be activated with Enter key, providing expected keyboard behavior.
  • Browser features - Links support browser features like "Open in New Tab" and middle-click behavior that buttons don't.
  • Semantic HTML - Using links for navigation follows web standards - links go places, buttons do things.
  • Crawlability - Links ensure your content is properly crawled and indexed by search engines.

Examples

🚨 DON’T

<button (click)="router.navigate(['/products'])">Products</button>

✅ DO

<a routerLink="/products" routerLinkActive="active-link">Products</a>