Morphic Navbar
モーフィックナビバー
Every link sits in one solid slab; the current one pulls away from it with a margin and rounds all four corners, while the two links it left behind round the corner they have just exposed. Nothing moves except border-radius↗↗ and a margin, both under a single transition, which is why the row reads as one shape reflowing rather than four buttons repainting. The active link carries aria-current↗↗, so the state is not only in the geometry. The original glass surface is dropped for a flat slab. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Copy and paste the following code into a new component file:1
How to use it2
Props
MorphicNavbar
| Name | Default | Description |
|---|---|---|
| items | — | NavItem[] Links in the order they appear |
| defaultHref | first item | string Which link starts active. The active link is tracked in state, so pass the current route back through onNavigate if your router owns it |
| onNavigate | — | (href: string) => void Fired when a link is clicked |
| dark | false | boolean Render the dark palette |
NavItem
| Name | Default | Description |
|---|---|---|
| href | — | string Route the link points at, also its key |
| label | — | string Text inside the link |