Globe Menu React component
Navigation pinned to a slowly turning hairline globe: links ride the surface and fade as they swing round the back, drag to spin it, hover to pause, focus a link to turn it to the front, with a caption naming the link that faces you.
About the Globe Menu component
Globe Menu pins your links to a slowly turning wireframe globe drawn in fine lines. Each link rides the surface: it grows and brightens as it comes round to the front and fades and shrinks as it slips behind, so the menu feels like a small world to explore.
Dragging spins and tilts the globe, pointing at a link pauses it, and the caption underneath names whichever link is facing you, with its description and a Visit button. With the keyboard, Tab moves through the links and the globe turns each one to the front.
When to use it
Use it as a playful hero or landing-page navigation for a studio, a festival, a travel or community site, or a brand with offices or places to show off.
It suits five to ten links; for everyday site navigation, keep a conventional header alongside it.
Installation
Add the Globe Menu component to your project with the shadcn CLI. It lands in components/globe-menu.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/globe-menuOr copy the source by hand and install its dependencies:
npm install motion lucide-react clsx tailwind-mergeProps
<GlobeMenu /> accepts 8 props, all optional. It also accepts the usual <nav> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| items | { id: string; label: string; href: string; description?: string; lat?: number; lon?: number }[] | DEFAULT_LINKS |
| size Diameter of the globe in px on wide screens; it shrinks to fit narrow ones. | number | 420 |
| autoRotate Idle spin in degrees per second; 0 holds it still. | number | 10 |
| tilt Resting tilt toward the viewer, in degrees. | number | 18 |
| eyebrow | string | "Around the studio" |
| showCaption | boolean | true |
| onNavigate | (item: GlobeMenuLink, event: React.MouseEvent<HTMLAnchorElement>) => void | — |
- theme"dark" | "light"Default: "dark"
- items{ id: string; label: string; href: string; description?: string; lat?: number; lon?: number }[]Default: DEFAULT_LINKS
- size
Diameter of the globe in px on wide screens; it shrinks to fit narrow ones.
numberDefault: 420 - autoRotate
Idle spin in degrees per second; 0 holds it still.
numberDefault: 10 - tilt
Resting tilt toward the viewer, in degrees.
numberDefault: 18 - eyebrowstringDefault: "Around the studio"
- showCaptionbooleanDefault: true
- onNavigate(item: GlobeMenuLink, event: React.MouseEvent<HTMLAnchorElement>) => void
npm dependencies
Installed for you by the shadcn CLI.
Globe Menu FAQ
- Can I choose where each link sits?
- Yes, give an item lat and lon in degrees. Items without them are spread evenly over the band between 48° north and south.
- Can it stand still?
- Set autoRotate={0}. It also stops spinning for visitors who prefer reduced motion, and while a link is pointed at.
- Is it accessible?
- Every pin is a real link in the tab order; focusing one turns the globe to bring it to the front, and the caption announces the current link.
- Does it use WebGL?
- No. The globe is a small SVG redrawn each frame, and the links are ordinary HTML positioned on top of it.
