Menus & navigation
Lantern festival dropdown menu
Pull the string and five paper lanterns drop down on their cords, swaying until they settle. It is a dropdown menu with personality — built for seasonal campaigns, event pages and brands that want navigation to feel celebratory.
- 8.8 KB compiled
- 420 × 360 artboard
- 1 input
- 9 runtimes
How it works
- isOpen switches between Closed and Open states.
- The lanterns drop down on their cords as the menu opens.
- Per-lantern click animations (Blossom, Moon, Wish, Love, Sun) confirm the choice before navigating.
| Input | Type | What it does |
|---|---|---|
isOpen | Boolean | Drops the lanterns (true) or lifts them back up (false). |
When to use it
- Festival, holiday and seasonal campaign pages
- Event and ticketing sites
- Restaurant or hospitality menus
Accessibility
Mirror the five destinations in a real list for assistive tech and honour prefers-reduced-motion by opening without the sway.
Also searched as: animated dropdown menu · festive navigation · seasonal menu
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function LanternDropdownMenu() {
return (
<ExodeUICanvas
src="/lantern-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
Is this a full dropdown or just decoration?
It is a working menu: each lantern is clickable and the open state is an input your app controls.
How big is it?
About 8.8 KB as a compiled .bexode file.
More menus & navigation
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.