Liquid Navbar
`LiquidNavbar` gives a small primary navigation one soft, spring-driven active surface. Use it for compact site sections, portfolios and product sub-navigation where the selected destination must stay unmistakable.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
LiquidNavbar gives a small primary navigation one soft, spring-driven active surface. Use it for compact site sections, portfolios and product sub-navigation where the selected destination must stay unmistakable.
Keep labels short, use roughly three to six items and leave the default travel restrained. Avoid it for dense admin menus, multi-level information architecture or alongside another animated menu. The surface should support selection, never obscure it.
Use real href links for destinations and buttons only for local views. Arrow, Home and End keys, visible focus and aria-current/aria-pressed must remain intact. Mobile may scroll horizontally; reduced motion keeps an immediate active surface. Compose with a calm Hero, not a second goo effect.
Source: packages/skills/navigation/liquid-navbar.md