KokonutUI
A dynamic navigation bar with morphing animation between active states. Click the nav items above to see the morphing pill effect as the active indicator reshapes around each link.
The active pill reshapes with smooth border-radius transitions as you navigate between items.
The navbar container uses a frosted glass effect with backdrop blur for depth on dark backgrounds.
Adjacent items to the active one get contextual border radius, creating a seamless morphing feel.
In dark mode, the active item inverts to white on black. Light mode uses black on white.
| Prop | Type | Default |
|---|---|---|
| items | Record<string, { name: string }> | home, works, blog, about |
| defaultPath | string | / |
| className | string | undefined |