Menu
Overview
General
ButtonBadgePillsAvatarBrand lockupLayout
ContainerGrid & RowSurface & text utilitiesApp shellPage headerData Display
CardTableChartsCalendarStatsBulletsLeadersLogo wallCollapse & DisclosureTimelineValue chainDescriptionsFeedback
AlertProgressModalSlide-overSkeletonEmpty stateForms
Field & InputDropdownLead form & CTA rowDate pickerFilter barNavigation
NavSide navigationTop navigationApp switcherUser menuStepperTabsBreadcrumbPaginationTemplates
Sign-in pageSigned-out pageSettings layoutTheming
Browser tabProduct themesNavigation
Nav
Horizontal link bar; the current page carries aria-current.
.nav
<nav class="nav">
<a href="#" aria-current="page">Dashboard</a>
<a href="#">Transactions</a>
<a href="#">Reports</a>
<a href="#">Settings</a>
</nav>
Usage
- The current page carries
aria-current="page", that is what styles it, no extra class. - Inside an app shell, wrap in
.appnav/.appnav__innerso the bar is full-bleed but content aligns to the column; it scrolls horizontally on narrow screens instead of wrapping badly. - No hover-only interactions, every nav item is a plain tappable link.