Menus & navigation
Subway line navigation
Open it and a metro line draws itself across the screen, with every page as a station stop. Transit-map navigation is instantly readable and works especially well for step-by-step journeys: onboarding, checkout and documentation.
- 4.8 KB compiled
- 420 × 360 artboard
- 1 input
- 9 runtimes
How it works
- isOpen toggles the Closed and Open states.
- Opening reveals the line with each station — Home, Studio, Gallery, Shop, Contact — along it.
- Clicking a station plays its own arrival animation.
| Input | Type | What it does |
|---|---|---|
isOpen | Boolean | Draws the line and stations (true) or clears them (false). |
When to use it
- Multi-step onboarding and checkout flows
- Agency and studio sites
- Documentation and course navigation
Accessibility
Because stations are in order, mirror them in an ordered list (<ol>) so the sequence is clear to screen readers.
Also searched as: metro map menu · step navigation · transit line menu
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function SubwayLineNavigation() {
return (
<ExodeUICanvas
src="/subway-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
Can I use it as a progress indicator?
Yes. Drive which station is highlighted from your app state and it doubles as a step tracker.
Are the labels editable?
They are real text objects — rename them in the editor.
More menus & navigation
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.