Nav

A semantic navigation bar component. When fixed is set, it automatically positions itself at the top of the viewport and applies elevation level 5 (z-index: 50), keeping it above push-mode drawers and below overlay-mode drawers — no manual z-index needed.

Content is placed via a default slot. Apply background and other visual styles with kempo-css utility classes directly on the element.

Fixed Navbar

Add the fixed attribute to pin the nav to the top of the viewport. Add a spacer element after it so page content is not hidden beneath it.

<k-nav fixed class="bg-primary">
  <button>Menu</button>
  <a href="/">My App</a>
  <div style="flex: 1"></div>
  <a href="/account">Account</a>
</k-nav>
<div style="height: 4rem;"></div>

Inline Navbar

Without fixed, the nav sits in normal document flow.

<k-nav class="bg-primary">
  <button>Menu</button>
  <a href="/">My App</a>
  <div style="flex: 1"></div>
  <a href="/account">Account</a>
</k-nav>

Attributes & Properties

Slots