NavigationBar
NavigationBar is the strip shown at the bottom of every running Sim: the sim's title on the left, a row of per-Screen buttons and a home button for multi-screen sims, and the PhET/accessibility menu buttons on the right. Sim constructs exactly one NavigationBar internally — you never build one yourself, and its constructor even takes the owning Sim instance as an argument. Documented here because you'll see it referenced when reading Sim/Screen internals or customizing sim chrome via LookAndFeel, and because its static size constants are occasionally useful for layout math.
import { NavigationBar } from 'scenerystack/sim';
NavigationBar.NAVIGATION_BAR_SIZE; // Dimension2 - the bar's un-scaled design size (width matches HomeScreenView's layout bounds; height 40)You configure the navigation bar through Screen and Sim, not NavigationBar itself
As a sim author, everything you'd want to change about the navigation bar is exposed elsewhere: a screen's button icon and label come from Screen's navigationBarIcon/name options (built with ScreenIcon), and the bar's fill/text colors come from Sim.lookAndFeel (a LookAndFeel instance, exported from scenerystack/joist). There's no supported way to construct or restyle a NavigationBar directly.
Constructor
new NavigationBar( sim: Sim, tandem: Tandem )Constructed once by Sim during startup; not intended to be called from simulation code.
Behavior worth knowing
| Aspect | Detail |
|---|---|
| Single-screen sims | Shows only the sim title (left) and PhET/a11y buttons (right) — no home button or per-screen buttons, since there's nothing to switch between |
| Multi-screen sims | Adds a home button and one button per entry in sim.simScreens, laid out and centered via ManualConstraint, with each screen's width driven by its navigationBarIcon's label |
| Fill when on the home screen | The bar's background matches HomeScreen.BACKGROUND_COLOR (black) while the home screen is selected, so it visually blends into the HomeScreen rather than showing as a separate bar |
layout( scale, width, height ) | Called by Sim on window resize to rescale/reposition the bar's contents; not meant to be called directly by simulation code |
Related
- Sim — owns the single
NavigationBarinstance and itslookAndFeel. - Screen — supplies the
name/navigationBarIconeach screen button displays. - ScreenIcon — builds the icon
navigationBarIconexpects. - HomeScreen — the screen the home button switches to, and whose background color the bar matches when selected.