# Menu tabs
> A game pause menu’s header: the section title centred, its neighbours under L and R, hearts on the left and the coin count on the right, switching with a slide.
The strip across the top of a pause menu, which tells the player where they are, where they can go and how they are doing without reading anything else. The current section sits big and centred with a page dot for each section; the neighbours wait small on either side under the shoulder key that takes you there, and an end has nothing on its side, so the menu does not wrap. L and R (or Q and E) slide the whole strip one slot, the title shrinking into a side label as the neighbour grows into its place; past an end the strip bumps. Health and money stay in view, because most of what you do in a menu changes them: hearts refill a quarter at a time when you eat, bonus hearts pop in, and the count rolls. The bar is its own dark plate, so it reads on a light or a dark page.
A React component by Bruno Delorence: https://brunodelorence.com/components/menu-tabs. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Games · Menus.
## Anatomy
1. **Plate**: Its own dark plate, 1012 × 82 design units (360 wide, stacked, on a phone), radius 6. Every size is a multiple of `--u`, 1 px here, so the bar scales as one drawing.
2. **Health**: Red heart containers then yellow bonus hearts, fifteen to a row, read out as one `role="img"` label.
3. **Shoulder key**: L or R, sitting over the neighbour it leads to. It is gone at an end, and dips and flashes when pressed.
4. **Side label**: The neighbour’s name, small, 43 units clear of the title and never closer than 117 to the centre. A click goes there.
5. **Title**: The current section in bold italic, centred: the selected `role="tab"`, which takes focus.
6. **Page dots**: One square dot a section under the title; the current one is lit.
7. **Coin count**: A coin and the count, which rolls to a new value and glows while it rolls.
8. **Key legend**: Q and E as chips under the bar, on the page itself, so they follow its scheme. Left out with `keys={false}`.
## When to use
- The header of a game’s pause menu, with a few top-level sections the player pages through with the shoulder buttons.
- Sections in a fixed order where the neighbours matter: the player should see where L and R lead before pressing them.
- A menu where what you do changes your state: eating heals, buying spends, so health and money stay in view at the top.
- Controller-first navigation that also works with Q and E, the arrows and a click on a neighbour, on screens of any width.
- Three to six sections. The strip shows the current one and one neighbour a side, with a page dot for each.
## When not to use
- Navigation for an app or a website, read with a mouse. Use plain tabs or a segmented control that shows every label.
- Many sections, or ones the player picks by name. Use a list menu or a grid of icons.
- Sections that loop round. This one stops at the ends on purpose; use a carousel that wraps.
- A HUD shown during play. Use a hearts row and a coin counter on their own, without the tabs.
- Sub-pages inside one section, such as item categories. Use a row of icon tabs under this header.
## Installation
Install it with the shadcn CLI, into components/menu-tabs of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/menu-tabs.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { useState } from 'react';
import { MenuTabs } from './menu-tabs';
export function PauseMenu({ health, gold }: { health: number; gold: number }) {
const [section, setSection] = useState(1);
return (
);
}
```
## States
- **First section**: `section={0}`: nothing on the left and no L key; pressing L bumps the strip.
- **Middle section**: `section={1}`: a neighbour under each key.
- **Last section**: `section={2}`: the menu does not wrap, so the right side is empty.
- **Hurt**: `hearts={5.25}`, no bonus: the sixth heart holds one quarter, the last two are empty sockets.
- **Nearly out**: `hearts={0.75}`: three quarters of the first heart, filled clockwise from the top left.
- **Bonus hearts**: `bonusHearts={15}` on a full bar: yellow hearts after the red ones, wrapping to a second row.
- **Five sections**: Five dots; the sections two away wait off the plate, ready to slide in.
- **No keys**: `keys={false}`: no Q and E legend and no keyboard switching, for a menu that handles input itself.
- **Wide**: From 640 px the bar is one row, 1012 units wide: health on the left, the tabs centred, the coins on the right. The other tiles show the stacked layout used under 640 px.
## How it works
- Every size is a multiple of one design unit, --u, worked out from the component’s width with a container query unit (min(1px, (100cqi − 32px) / 1012), or --menu-tabs-unit when set), so the bar scales as one drawing and keeps the kit’s proportions: a 1012 × 82 plate, a 21-unit bold italic title, 11-unit labels under 18 × 13 keys, 14 × 12 hearts at a 15.85 pitch, fifteen to a row. Below 640 px the drawing is 360 units wide and stacks health and coins over the tabs.
- Each section is a tab placed from the centre by its offset from the current one. The title and the side label are two copies of the name in one grid cell: as a tab leaves the centre the title fades and shrinks to 0.52 towards the label’s place while the label grows in from 1.9 times; the tab itself slides with translate in 300 ms on a slightly overshooting curve. The neighbours sit 43 units from the title’s edges and never closer than 117 units to the centre, from the words’ measured widths (a ResizeObserver), so a long title pushes them out; the L and R keys move with them.
- A press dips its key 1.5 units and flashes it white for 140 ms. Past an end the tablist is nudged 7 units towards the press and springs back with the Web Animations API, so the input still gets an answer. The page dot moves with a colour fade.
- Health is a row of SVG hearts: an empty socket under the filled quarters, each quarter the full heart clipped to a quadrant, clockwise from the top left. A new value is stepped towards every 45 ms, a quarter at a time for the red hearts, then a whole bonus heart at a time; a heart that completes pops (1.35 times, a white flash) and a bonus heart that arrives scales in with an overshoot. The coin count rolls to a new value on requestAnimationFrame with an ease-out, glowing while it rolls.
- Uncontrolled, a demo plays while it is on screen and untouched: the menu closes and opens on the first section, R to the second, the player eats (hearts refill, bonus hearts pop in), R to the last, R again bumps, L twice, L bumps. Any real input hands it to the reader and puts the full bar back.
- There is no scene behind the bar: like the kit’s screens it brings its own dark plate (#131919 under a light rule), so its colours do not change with the page. What touches the page follows the scheme through light-dark() tokens: a faint light edge round the plate on a dark page, a soft lift on a light one, and the key chips underneath. Keys, hearts and the coin are SVG; glows are text shadows behind sharp shapes, with no blur filters.
## API reference
- **sections** (`string[]`, default `['Adventure Log', 'Inventory', 'System']`): The section names, in order. The menu does not wrap: the ends have nothing on their outer side.
- **section** (`number`): The current section’s index, controlled. Turns the demo off.
- **defaultSection** (`number`, default `0`): Uncontrolled, the section shown first.
- **onSectionChange** (`(index: number) => void`): Called with the new index when the reader switches section, by key, click or tap.
- **hearts** (`number`): Health, in hearts out of maxHearts; quarters allowed (5.25). The bar steps to a new value a quarter at a time. Turns the demo off.
- **maxHearts** (`number`, default `8`): The number of red heart containers.
- **bonusHearts** (`number`, default `15`): Yellow bonus hearts after the containers; quarters allowed. They pop in one after another.
- **coins** (`number`, default `13878`): The coin count; it rolls to a new value.
- **keys** (`boolean`, default `true`): Listen to Q / E (and L / R, the arrows, Home and End) while the tabs have focus; also shows the key chips under the bar.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, a short run of play: the menu opening, switching, healing, bumping at the ends. Any input stops it.
- **colorScheme** (`'light' | 'dark' | 'system'`): Light or dark, or the reader’s; without it, the page’s color-scheme. The bar keeps its colours on both; its edge and the key chips follow it. Set --menu-tabs-unit on the root to fix the size (1px is the kit’s 1012 × 82).
- **className** (`string`): Added to the root.
## Accessibility
- The sections are a real tablist named Menu sections, with one tab stop: the current tab. Q / E, L / R and the arrow keys move the selection and the focus with it, Home and End jump to the ends, and the neighbours’ tabs list Q or E in aria-keyshortcuts.
- A click or tap on a neighbour’s label (or its key) switches to it; tabs out of sight take no pointer.
- Health and coins are images with words: “Health: 8 of 8 hearts, plus 15 bonus” and “13,878 coins”. When the props change them, a polite live region reads the new value; the demo’s changes are not announced.
- Focus is a light outline round the current tab, on the bar’s own dark plate in either scheme.
- Under reduced motion the demo does not play and every change is instant: no slide, no bump, no stepping or popping hearts, no rolling count.
## Source
### menu-tabs/menu-tabs.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useCallback,
useEffect,
useEffectEvent,
useId,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
type KeyboardEvent,
} from 'react';
import { useAutoplay } from './use-autoplay';
import styles from './menu-tabs.module.css';
/*
* Menu tabs: the header of a game's pause menu. It tells the player where they are, where they can
* go and how they are doing, at a glance.
*
* - The current section's name sits big and centred, in bold italic, with a page dot for each
* section under it. The sections on either side sit small under the shoulder key that takes you
* there: L on the left, R on the right. At an end there is nothing on that side, so the menu
* does not wrap.
* - Switching (L / R, the Q / E keys, the arrows, or a click on a neighbour) slides the whole strip
* one slot: the title shrinks and fades into a side label as it moves away, the neighbour grows
* into the title as it comes in, the next one slides in from beyond the edge, and the page dot
* moves. The pressed shoulder key dips and flashes. Past an end, the strip nudges towards the
* press and springs back.
* - Health on the left: red heart containers, with yellow bonus hearts after them, fifteen to a
* row. A heart holds quarters, filled clockwise from the top left. A new value is not jumped to:
* hearts refill a quarter at a time (a heart pops when it completes) and bonus hearts pop in one
* after another, the way a game heals you when you eat from the menu.
* - The coin count on the right rolls to a new value and glows while it rolls.
* - The bar is its own dark plate, as in the kit, so it reads the same on a light or a dark page.
* Every size is a multiple of --u, one design unit (1 px at the kit's 1012 × 82): the bar scales
* with the component's width, and below 640 px it stacks health and coins over the tabs.
* - Uncontrolled, a demo plays: the menu opens on the first section, R to the second, the player
* eats (hearts refill, bonus hearts pop in), R to the last, R again bumps, L back twice, L bumps,
* and the menu closes and opens again. Any real input hands it to the reader.
*/
export type MenuTabsProps = {
/** The section names, in order. */
sections?: string[];
/** The current section's index, controlled. Turns the demo off. */
section?: number;
/** Uncontrolled, the section shown first. */
defaultSection?: number;
/** Called with the new index when the reader switches section. */
onSectionChange?: (index: number) => void;
/** Health, in hearts (quarters allowed), out of maxHearts. Turns the demo off. */
hearts?: number;
/** The number of red heart containers. */
maxHearts?: number;
/** Yellow bonus hearts on top of the containers (quarters allowed). */
bonusHearts?: number;
/** The coin count. */
coins?: number;
/** Listen to Q / E (and L / R, the arrows, Home and End) while the tabs have focus. */
keys?: boolean;
autoplay?: boolean;
colorScheme?: 'light' | 'dark' | 'system';
className?: string;
};
const SECTIONS = ['Adventure Log', 'Inventory', 'System'];
const MAX_HEARTS = 8;
const BONUS = 15;
const COINS = 13878;
const PER_ROW = 15;
/** How far a quarter of health takes to refill, and a bonus heart to pop in. */
const QUARTER_MS = 45;
const BONUS_MS = 50;
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
const quarters = (value: number) => Math.round(value * 4) / 4;
const px = (value: number | undefined) => (value === undefined ? undefined : `${value}px`);
export function MenuTabs({
sections = SECTIONS,
section,
defaultSection = 0,
onSectionChange,
hearts,
maxHearts = MAX_HEARTS,
bonusHearts,
coins = COINS,
keys = true,
autoplay = true,
colorScheme,
className,
}: MenuTabsProps) {
const last = Math.max(0, sections.length - 1);
const controlled = section !== undefined || hearts !== undefined;
const { ref, take, reduced, playing: canPlay } = useAutoplay();
const playing = autoplay && !controlled && canPlay;
const [ownSection, setOwnSection] = useState(() => clamp(defaultSection, 0, last));
const current = clamp(section ?? ownSection, 0, last);
// Health the demo drives while it plays; otherwise the props (or a full bar).
const [demoHealth, setDemoHealth] = useState<{ hearts: number; bonus: number } | null>(null);
const targetHearts = quarters(clamp(hearts ?? demoHealth?.hearts ?? maxHearts, 0, maxHearts));
const targetBonus = quarters(Math.max(0, bonusHearts ?? demoHealth?.bonus ?? BONUS));
const [shown, setShown] = useState(true);
// ---- Health, shown a quarter at a time ----
const [health, setHealth] = useState({ hearts: targetHearts, bonus: targetBonus });
const [ready, setReady] = useState(false);
useEffect(() => setReady(true), []);
const instant = reduced || !shown || !ready;
useEffect(() => {
if (instant) {
setHealth({ hearts: targetHearts, bonus: targetBonus });
return;
}
// Hearts first, a quarter per tick; then bonus hearts, a whole one per tick.
const timer = window.setInterval(() => {
setHealth((now) => {
if (now.hearts !== targetHearts) {
const step = targetHearts > now.hearts ? 0.25 : -0.25;
return { ...now, hearts: now.hearts + step };
}
if (now.bonus !== targetBonus) {
const gap = targetBonus - now.bonus;
const step = Math.abs(gap) < 1 ? gap : Math.sign(gap);
return { ...now, bonus: now.bonus + step };
}
window.clearInterval(timer);
return now;
});
}, QUARTER_MS);
return () => window.clearInterval(timer);
}, [targetHearts, targetBonus, instant]);
// ---- Switching ----
const trackRef = useRef(null);
const [held, setHeld] = useState<{ side: 'left' | 'right'; id: number } | null>(null);
const heldTimer = useRef(0);
const press = useCallback((side: 'left' | 'right') => {
window.clearTimeout(heldTimer.current);
setHeld((now) => ({ side, id: (now?.id ?? 0) + 1 }));
heldTimer.current = window.setTimeout(() => setHeld(null), 140);
}, []);
useEffect(() => () => window.clearTimeout(heldTimer.current), []);
const bump = useCallback(
(direction: -1 | 1) => {
const track = trackRef.current;
if (!track || reduced || !track.animate) return;
// Pressing L at the start pushes the strip right, against the wall, and it springs back.
const push = -direction * 7;
track.animate(
[
{ translate: '0 0' },
{ translate: `calc(${push} * var(--u)) 0`, offset: 0.35 },
{ translate: `calc(${-push * 0.25} * var(--u)) 0`, offset: 0.7 },
{ translate: '0 0' },
],
{ duration: 300, easing: 'ease-out' },
);
},
[reduced],
);
const go = useCallback(
(to: number, via?: 'left' | 'right') => {
if (via) press(via);
if (to < 0 || to > last) {
bump(to < 0 ? -1 : 1);
return;
}
if (to === current) return;
if (section === undefined) setOwnSection(to);
onSectionChange?.(to);
},
[press, bump, last, current, section, onSectionChange],
);
// Focus follows the selection while it is in the tabs.
useEffect(() => {
const track = trackRef.current;
if (!track || !track.contains(document.activeElement)) return;
track.querySelector('[aria-selected="true"]')?.focus({ preventScroll: true });
}, [current]);
// The neighbours sit a fixed gap (43 units) from the title's edges, and never closer than 117
// units from the centre, so a long title pushes them out. That needs the words' widths: measured
// once laid out, and again when the font or the size changes. Until then, CSS uses 117 units.
const [widths, setWidths] = useState<{ titles: number[]; labels: number[]; unit: number }>();
useLayoutEffect(() => {
const track = trackRef.current;
if (!track) return;
const measure = () => {
const unit = track.offsetHeight / 79;
const read = (part: string) =>
[...track.querySelectorAll(`[data-part="${part}"]`)].map(
(span) => span.offsetWidth,
);
if (unit > 0) setWidths({ titles: read('title'), labels: read('label'), unit });
};
measure();
const observer = new ResizeObserver(measure);
track.querySelectorAll('[data-part="title"], [data-part="label"]').forEach((span) => {
observer.observe(span);
});
observer.observe(track);
return () => observer.disconnect();
}, [sections]);
const place = (index: number) => {
const offset = clamp(index - current, -2, 2);
if (!widths || offset === 0) return offset === 0 ? 0 : undefined;
const { titles, labels, unit } = widths;
const near = current + Math.sign(offset);
const side = Math.max(117 * unit, titles[current] / 2 + labels[near] / 2 + 43 * unit);
return Math.sign(offset) * (Math.abs(offset) === 1 ? side : side + 117 * unit);
};
const onKeyDown = (event: KeyboardEvent) => {
if (event.altKey || event.ctrlKey || event.metaKey) return;
take();
if (!keys) return;
const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
let handled = true;
if (key === 'q' || key === 'l' || key === 'ArrowLeft') go(current - 1, 'left');
else if (key === 'e' || key === 'r' || key === 'ArrowRight') go(current + 1, 'right');
else if (key === 'Home') go(0);
else if (key === 'End') go(last);
else handled = false;
if (handled) event.preventDefault();
};
// ---- The demo ----
const restore = useEffectEvent(() => {
setDemoHealth(null);
setShown(true);
});
const step = useEffectEvent((name: string) => {
if (name === 'close') setShown(false);
else if (name === 'reset') {
setOwnSection(0);
setDemoHealth({ hearts: Math.min(maxHearts, 5.25), bonus: 0 });
} else if (name === 'open') setShown(true);
else if (name === 'eat') setDemoHealth({ hearts: maxHearts, bonus: BONUS });
else if (name === 'next') go(current + 1, 'right');
else if (name === 'prev') go(current - 1, 'left');
});
useEffect(() => {
if (!playing) {
restore();
return;
}
const timeline: [number, string][] = [
[700, 'close'],
[950, 'reset'],
[1150, 'open'],
[2300, 'next'],
[3300, 'eat'],
[5600, 'next'],
[6800, 'next'],
[7900, 'prev'],
[9000, 'prev'],
[10100, 'prev'],
];
const period = 11600;
const timers: number[] = [];
// One pass of the timeline, timed from now: run at once, then again every period.
const run = () => {
timers.splice(0).forEach((timer) => window.clearTimeout(timer));
for (const [at, name] of timeline) timers.push(window.setTimeout(() => step(name), at));
};
run();
const loop = window.setInterval(run, period);
return () => {
window.clearInterval(loop);
timers.forEach((timer) => window.clearTimeout(timer));
};
}, [playing]);
// ---- Words for assistive tech: health and coins; announced when the props change them ----
const total = Math.ceil(health.bonus);
const healthLabel = `Health: ${targetHearts} of ${maxHearts} hearts${
targetBonus ? `, plus ${targetBonus} bonus` : ''
}`;
const coinLabel = `${coins.toLocaleString('en-US')} coins`;
const [news, setNews] = useState('');
const said = useRef({ hearts, bonusHearts, coins });
useEffect(() => {
const before = said.current;
said.current = { hearts, bonusHearts, coins };
if (before.coins !== coins) setNews(coinLabel);
if (before.hearts !== hearts || before.bonusHearts !== bonusHearts) setNews(healthLabel);
}, [hearts, bonusHearts, coins, healthLabel, coinLabel]);
const id = useId();
const quarter = `${id}-q`;
return (