NavigationNavigation7 props
Top Nav
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 paire...
공식 문서 열기Preview
Import
import {TopNav} from '@astryxdesign/core/TopNav';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
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 paire...
topnavnavbarappbarheadertoolbarnavigationmenubartopbar
Important props
이 컴포넌트는 주요 variant prop보다 children/compound pattern 중심으로 사용합니다.
Theming targets
astryx-top-navastryx-top-nav-itemastryx-top-nav-headingastryx-top-nav-mega-menuastryx-top-nav-mega-menu-itemastryx-top-nav-mega-menu-featured-cardastryx-top-nav-menu
Best practices
- DoInclude a product logo and name in the heading slot to clearly identify the application.
- DoLimit primary navigation items to 5 or fewer for quick scanning and minimal cognitive load.
- Do notAvoid using TopNav to filter page content; use Tabs or filter controls instead.
- Do notAvoid deeply nested navigation hierarchies; keep menus to one level of depth.