Navigation
Components for guiding users through the interface: navbar, breadcrumbs, stepper, and pagination.
Navbar
Top-level navigation bar with branding, links, and actions.
<nav class="kds-navbar">
<a href="#" class="kds-navbar__brand kds-h5">⬡ MyApp</a>
<div class="kds-navbar__links">
<a href="#" class="kds-navbar__link kds-navbar__link--active">Home</a>
<a href="#" class="kds-navbar__link">Features</a>
</div>
<div class="kds-navbar__actions">
<button class="kds-btn kds-btn--outline kds-btn--sm">Sign In</button>
<button class="kds-btn kds-btn--solid kds-btn--sm">Sign Up</button>
</div>
</nav>
Breadcrumbs
Secondary navigation showing the user's location in the page hierarchy.
<nav class="kds-breadcrumb" aria-label="Breadcrumb">
<ol class="kds-breadcrumb__list">
<li class="kds-breadcrumb__item"><a class="kds-breadcrumb__link"
href="#">Home</a></li>
<li class="kds-breadcrumb__separator">/</li>
<li class="kds-breadcrumb__item" aria-current="page">Current</li>
</ol>
</nav>
Stepper
Multi-step progress indicator for wizards and multi-page forms.
✓
Account
2
Profile
3
Review
4
Confirm
<div class="kds-stepper">
<div class="kds-stepper__step kds-stepper__step--completed">
<div class="kds-stepper__indicator">✓</div>
<span class="kds-stepper__label">Account</span>
</div>
<div class="kds-stepper__connector kds-stepper__connector--completed"></div>
<div class="kds-stepper__step kds-stepper__step--active">
<div class="kds-stepper__indicator">2</div>
<span class="kds-stepper__label">Profile</span>
</div>
<div class="kds-stepper__connector"></div>
<div class="kds-stepper__step">
<div class="kds-stepper__indicator">3</div>
<span class="kds-stepper__label">Review</span>
</div>
</div>
<!-- States: --completed | --active | (default = pending) -->
Pagination
Navigate between pages of content with numbered controls, ellipsis, and arrow buttons.
<nav class="kds-pagination" aria-label="Pagination">
<button class="kds-pagination__btn kds-pagination__btn--prev"
disabled>←</button>
<button class="kds-pagination__btn kds-pagination__btn--active"
aria-current="page">1</button>
<button class="kds-pagination__btn">2</button>
<button class="kds-pagination__btn">3</button>
<span class="kds-pagination__ellipsis">…</span>
<button class="kds-pagination__btn">12</button>
<button class="kds-pagination__btn kds-pagination__btn--next">→</button>
</nav>