TopNav is a horizontal navigation bar for product-level navigation in application headers. Use TopNav for 5 or fewer always-visible navigation items, or minimal navigation paired with search and controls. For complex navigation hierarchies, use a sidebar; to filter content, use tabs or filter buttons instead.
ts
| Guidance | Practices |
|---|---|
| Do | Include a product logo and name in the heading slot to clearly identify the application. |
| Do | Limit primary navigation items to 5 or fewer for quick scanning and minimal cognitive load. |
| Don't | Avoid using TopNav to filter page content; use Tabs or filter controls instead. |
| Don't | Avoid deeply nested navigation hierarchies; keep menus to one level of depth. |
Navigation layout with center-aligned nav items flanked by a logo heading and end actions.
Full-featured navigation bar with icon-labeled nav items, search, notifications, and a primary CTA.
Navigation bar with a hover-triggered dropdown menu showing product items with icons and descriptions.
Marketing-style navigation with a full-width mega menu featuring product items and a promotional featured card.
Navigation bar with multiple hover-triggered dropdown menus that auto-close when switching between them.
Navigation bar with a branded logo icon, heading link, nav items, and a profile action.