Navigation menus.
Twenty-five of them.
Inspired by the shadcn NavigationMenu — ten built in PlanckUi's own CSS, fifteen with an Apple accent. Five of those are Liquid Glass over a color field, with the real Apple mark. Every dropdown works. Every animation obeys the house law: transform and opacity only, under 300 ms, reduced-motion safe.
Part I — PlanckUi CSS. The house tokens: petrol accent, Archivo display type, Golos body, Emil's motion rules.
Mega menu
Classic bar, two-column panel with a featured card.
Click “Widgets” or “Blocks” — real dropdowns, 180 ms ease-out.
Inline popovers
The shadcn pattern — quiet text links, small popovers.
Category mega grid
Full-width catalog panel with icons and counts.
Hover-safe mega grid: every category gets an icon, a name, a count.
Sliding underline
A petrol indicator that glides between items.
Hover the items — the petrol underline glides between them.
Vertical sidebar
Sidebar with a sliding active pill and badges.
Sliding pill selection — 220 ms, transform only.
Breadcrumb trail
Where am I, and how do I step back.
Mobile slide-down
Hamburger panel with a grid-rows animation.
Search-first nav
Type to filter — results update as you go.
Focus the field and type — results filter live.
Tabs with counts
Filter chips that show what each tab holds.
Showing 295 widgets in All.
Floating dock
Bottom dock with tooltips and an active dot.
Part II — Apple UI. Real Apple mark, SF-style glyphs, macOS and iOS palettes — and five Liquid Glass pieces that refract the color beneath them.
Global nav
The apple.com bar — translucent, 12px, tiny glyphs.
Menu bar
Working File and View menus with shortcut hints.
The Dock
Pointer magnification on a glass shelf.
Floating pill
Refractive pill nav over a color field.
Tab bar
iOS bottom tabs with a center create button.
Sidebar
visionOS-style panel with a collapse spring.
Mega menu
Glass panel with product tiles and a feature card.
Capsule actions
Expanding search, fanning create menu, like toggle.
Store tabs
Product mega menu with tiles and pricing.
Segmented control
Sliding thumb navigation with spring physics.
Settings list
Grouped inset rows with a real toggle switch.
Toggle Airplane Mode — the switch springs like iOS.
Dark developer nav
Quiet links that light up on hover.
Product nav
Buy button, bag badge and a working mini-cart.
Colored tabs
Tabs whose active state paints the content card.
App grid
Round app icons on black — Activity ring included.
Want these as blocks?
Every menu above can become a copy-paste section like the ones on the blocks page — say which ones and they'll get the same Copy HTML treatment.