Menus & navigation
Orbit radial menu
Tap the sun and five options launch into orbit around it, each on its own spring. It is a radial (or "pie") menu that feels like a tiny solar system instead of a list — a strong fit for creative tools, games and launchers where the menu itself is part of the brand.
- 7 KB compiled
- 420 × 360 artboard
- 1 input
- 9 runtimes
How it works
- One Boolean input, isOpen, drives a two-state machine: Closed and Open.
- Opening plays a timeline that sends each planet out to its own orbit around the sun.
- Every planet has its own click animation (Home, Love, Explore, Star, Night) for instant feedback before you navigate.
| Input | Type | What it does |
|---|---|---|
isOpen | Boolean | true opens the orbit, false collapses it back into the sun. |
When to use it
- Floating action menus in creative or drawing apps
- Game and kiosk launchers
- Portfolio sites where navigation is a statement
Accessibility
Keep a real <button aria-expanded> next to the canvas that sets isOpen, and render each destination as a visually hidden link so keyboard and screen-reader users can navigate.
Also searched as: radial menu · circular menu · pie menu · floating action menu
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function OrbitRadialMenu() {
return (
<ExodeUICanvas
src="/orbit-menu.bexode"
autoPlay
onReady={(engine) => {
// drive it from your own UI:
// engine.setInputBool('isOpen', true);
}}
/>
);
}React loads the compact .bexode; the other runtimes load the .exode JSON source — both come from the same design.
Questions
How do I open the orbit menu from my own button?
Set the isOpen input: engine.setInputBool("isOpen", true). The same file reacts to clicks on the sun itself.
Can I change the icons and colors?
Yes. Open it in ExodeUI, select a planet and edit its fill and glyph — the orbit animation keeps working.
More menus & navigation
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.