Usage
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.import {XDSTopNavHeading} from '@xds/core/TopNav'
Best 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. |