Navigation Menu

Recipe CSS

This is the exact CSS your kit ships for Navigation Menu — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Navigation menu (.navmenu) — shadcn gap filler ==================
 * Horizontal top nav; one item opens a .menu flyout positioned below. */
.navmenu { display: flex; align-items: center; gap: var(--k-s-2); flex-wrap: wrap; }
.navmenu__item {
  display: inline-flex; align-items: center; gap: var(--k-s-4);
  min-height: var(--k-row-h-md, 36px); padding: 0 var(--k-s-12);
  border: 0; background: transparent; color: var(--k-fg-muted);
  font: inherit; font-size: var(--k-type-small); font-weight: var(--k-weight-medium);
  border-radius: var(--k-radius-md); cursor: pointer;
  transition: background var(--k-dur-fast, 140ms) var(--k-ease, ease), color var(--k-dur-fast, 140ms) var(--k-ease, ease);
}
.navmenu__item:hover { background: var(--k-state-hover); color: var(--k-fg); }
/* Active reads CHROMATIC (brand whisper) so the current item is distinct from a
   merely-hovered one (neutral) — not the same wash at the same intensity. */
.navmenu__item--on { background: var(--k-state-selected-bg); color: var(--k-fg); font-weight: var(--k-weight-semibold); }
.navmenu__group { position: relative; }
.navmenu__panel { position: absolute; top: calc(100% + var(--k-s-4)); left: 0; min-width: var(--k-overlay-min, 12rem); z-index: var(--k-z-dropdown); animation: var(--k-anim-fade-in, k-fade-in 160ms ease) both; }