Orbit Nav

A hamburger menu that opens a night sky out of the toggle, with a low sun in the corner and every link on its own drifting orbit.

About this tool

A full-page hamburger menu that reads as a small star chart. The toggle grows a circle of night sky until it covers the page: a low sun glows in the corner, stars twinkle and dashed orbits drift around the sun with planets on them. Every link sits on its own orbit, so hovering or focusing one lights its ring, draws a ray from the sun to its marker and dims the others. Closing folds the sky back into the toggle, and a click mid-way reverses it from where it is. It is a real menu: a toggle that reports its state and names its action, a labelled navigation, focus kept inside while it is open, Escape to close with focus handed back to the toggle, and the page behind made inert. Wordmark, copy, links, palette, sun size, opening time and orbit speed are editable live, and the export is one HTML file with no dependencies.

In collections: Navigation Components: Tabs, Steppers & Menus Micro Interactions: UI Animation Examples

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough? Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Copy

Wordmark

Eyebrow

Heading

Link 1

Link 2

Link 3

Link 4

Layout

Scale %

Sky

Sun

Glow

Night

Sky text

Sun size px

Palette

Page

Text

Secondary text

Accent

Motion

Opening time ms

Orbit period s

Preview

Autoplay

off loop

Stage

Stage colour

#ffffff