Priority Plus Nav
A nav that measures itself and collapses what does not fit into a More menu — ghost-row measurement, no breakpoints, no flicker loop.
- Category
- Components
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* A nav that collapses whatever does not fit into a More menu.
*
* MEASURE A HIDDEN COPY, NOT THE VISIBLE ROW. This is the whole problem.
* Measuring the rendered row means measuring it AFTER items were hidden — so
* hiding an item frees space, which makes it fit again, which overflows again.
* The nav flickers forever, and it only does it at the exact widths where the
* cycle closes, so it looks like a rare glitch rather than a design error. An
* off-screen row holding every item at its natural width is measured once and
* never participates in the decision it informs.
*
* RESERVE THE MORE BUTTON'S OWN WIDTH — but only when something will actually
* be hidden. Reserve it unconditionally and the last item collapses while there
* is visibly room for it; forget it and the last visible item slides under the
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Priority-plus navigation shows as many items as fit and folds the rest into a More menu, and almost every implementation contains the same defect: it measures the row it is about to change. Hiding an item frees space, the freed space makes the item fit again, and fitting it overflows the row — a loop that only closes at particular widths, so it manifests as an occasional flicker rather than an obvious fault and survives review comfortably. The fix is to measure a second copy of the full row, absolutely positioned and hidden, which holds every item at its natural width and never participates in the decision it informs. The second detail is the More button itself. Its width has to be reserved when deciding how many items fit, but only once something is genuinely going to be hidden — reserve it unconditionally and an item collapses while there is visibly room for it, forget it and the last visible item slides underneath the button. Trying the whole row first and only re-fitting on failure handles both. Measurement is also repeated when webfonts resolve, since widths taken against the fallback face are usually wrong by enough to drop an item. What makes the pattern worth the trouble is that no breakpoint is involved anywhere: the nav responds to the width it is actually given, so it behaves correctly inside a sidebar, a split pane or a resized panel, all of which a viewport media query gets wrong.
Curator’s note
Measure the visible row and hiding an item frees the space that makes it fit again. The nav flickers only at the widths where that cycle closes, which is why it ships.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Index Overlay Menu
componentsA full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
Live Hours Nav
componentsA small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Morphing Hamburger Icon
componentsA three-line menu icon that morphs smoothly into an X.