Astryx Design System

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.

ts
import {TopNav} from '@astryxdesign/core/TopNav'

Best practices

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.

Examples

Common configurations, variations, and states.

TopNav — Centered Navigation

Navigation layout with center-aligned nav items flanked by a logo heading and end actions.

TopNav — Enterprise Dashboard

Full-featured navigation bar with icon-labeled nav items, search, notifications, and a primary CTA.

TopNav — Hover Menu

Navigation bar with a hover-triggered dropdown menu showing product items with icons and descriptions.

TopNav — Mega Menu

Marketing-style navigation with a full-width mega menu featuring product items and a promotional featured card.

TopNav — Multiple Dropdowns

Navigation bar with multiple hover-triggered dropdown menus that auto-close when switching between them.

TopNav — With Logo

Navigation bar with a branded logo icon, heading link, nav items, and a profile action.