ns-ui / categories

React navigation components

Menus, tabs, breadcrumbs, docks, command palettes and tree views — the controls that move a visitor between views. Use these for wayfinding inside an app or site, as opposed to actions that change data.

28 components

  1. Nav Site Condense

    A full-width site nav with the furniture a real site needs: a scroll-condensed bar, a menu trigger present at every width, and a mobile sheet built on native <dialog> for a free focus trap and Escape-to-close.

  2. Nav Condense Rail

    A full-width site nav that condenses in place as the page scrolls — roomy padding, full-size wordmark and links at the top, tightening to a dense pinned rail — over a distance measured from the bar's own rendered height at each extreme, not a guessed scroll-pixel constant.

  3. Tree Box Drawing

    File/directory tree drawn with real box-drawing connectors, whose glyphs redraw themselves as folders expand and collapse instead of static per-level guides.

  4. Pagination Dog Ear

    A pagination control rendered as book folios — paper cards for each page number, a raised current page, and a CSS corner dog-ear that curls further as you hover prev/next to peek the destination number, leaving a small permanent crease on every page you've visited.

  5. Context Menu Unfold

    A context menu that unfolds like a pocket knife — items swing out from a hinged spine as slim blades, staggered from folded to open, with a hairline edge highlight while swinging; submenus unfold as a second, smaller knife from a blade's tip.

  6. Header Scroll Pill

    A page header that morphs between a full-width quiet nav bar at the top and a floating centered pill once scrolled — spring-like width/radius/padding morph, section label roll, and a progress hairline, with hysteresis so it never flutters at the threshold and a fast upward scroll flicks it back open with overshoot.

  7. Wizard Canal Lock

    A wizard stepper built as a flight of canal locks: the next chamber's water level climbs to meet the current one, and only once they equalize does the shared gate split open for the active highlight to glide through — an invalid step's level visibly stalls short of the gate line instead of popping a toast.

  8. Minimap Pantograph

    A minimap whose viewport rectangle is physically wired to the real viewport by a live SVG pantograph — two elbow arms solved by two-bar IK every frame — so dragging the small handle visibly swings and extends the linkage as the document pans, making the scale ratio legible instead of implied.

  9. Command Palette Rotary

    A jump switcher navigated as a 1D rotary space instead of a ranked list — destinations sit at fixed compass bearings on an invisible ring, and you sweep past them; only the reticle item resolves fully while neighbors compress toward the edges of a periscope slit, with a Geist Mono bearing tape scrolling along the top.

  10. Tabs Rail Points

    Tabs whose active indicator is one continuous SVG rail running under the entire row like railway track — selecting a tab throws the points, bending a raised siding segment off the base line so it travels to the new tab instead of a puck jumping between slots.

  11. Dock Shelf Lean

    A dock/toolbar where items lean like books on a shelf — hover or focus straightens one and cants its neighbors away, reorder is a pick-up/move/drop cycle, nothing ever scales.

  12. Listbox Sticky Groups

    A grouped listbox for long lists (timezones, countries, currencies) where every passed group header sticks in place, stacking into overlapping 20px slivers you can still read and click — a live table of contents made from the headers themselves.

  13. Menu Nested Trays

    Nested menus as telescoping card-catalog trays: opening a submenu shunts the parent back and dims it instead of spawning a flyout, leaving a 12px clickable edge per ancestor as a live breadcrumb of depth.

  14. Tabs Notch Tenon

    Tabs whose bottom rule is a single SVG path with a notch missing under the active tab, and whose panel carries a matching raised tenon that slots into that gap — the strip and panel read as one interrupted border, legible at rest with zero motion.

  15. Breadcrumb Fold

    A breadcrumb that folds like a camera bellows — ancestor segments rest pleated into narrow slivers and the current page sits fully extended, with hover or focus inflating any sliver back to natural width as its neighbours redistribute the fixed total width.

  16. Drawer Counterweight

    Side drawer hung on a counterweight like a sash window: a thin track on the drawer's leading edge carries a weight pill that travels opposite the drag at -0.6x, and wherever it sits at release — before or past the tick — decides whether a spring pulls the drawer shut or bottoms the weight out and holds it open.

  17. Tree Root Trace

    File/nav tree whose indent guides are a single living root system — an SVG path draws itself down from a parent's junction and elbows into each child row as it expands, retracting on collapse instead of toggling static border-left lines.

  18. Context Compaction River

    Context compaction drawn as a meandering river: live turns are points on one curving channel, and a compacted run of turns necks off into a reopenable, re-injectable oxbow lake sitting 12px off the channel.

  19. Tabs Slack Cable

    Classic tabs whose active-indicator is a single SVG path drawn as a slack cable instead of a rigid bar: it sags mid-jump proportional to distance, tautens flat with a small spring snap, and previews the destination with a 3px tug when you hover a neighboring tab.

  20. Badge Unread Tarnish

    Unread badge that tarnishes like brass: solid when fresh, an outline within a day, a muted ring after a week — new activity instantly re-polishes it with a small flare.

  21. Drill Down Spines

    Drill-down navigation where every pushed level compresses into a slim clickable book spine instead of vanishing behind a back button, so the whole navigation history stands on a shelf beside you.

  22. Tabs Carriage

    Tabs whose underline is a typewriter carriage on a rail — forward moves glide on a spring and stretch with speed, backward moves snap home faster with a ding-bounce, and the panel line-feeds in from the travel direction.

  23. Tree Hinge Fold

    Tree view whose branches unfold like a carpenter's folding rule — each child group is a hinged segment that swings open around a visible pivot, rows unfolding in sequence, and snaps shut faster than it opens.

  24. Breadcrumb Overflow Menu

    A breadcrumb trail that collapses from the middle into a menu of the hidden levels, with an accent rule that sweeps under the current level.

  25. Dropdown Drape

    Dropdown whose panel is a live verlet cloth pinned to the trigger — it falls and drapes like an awning, labels ride the weave, the cursor billows the fabric, and close yanks it back up.

  26. Command Palette Orbit

    Cmd-K palette where fuzzy-match results orbit the input as label pills — orbital radius is inverse match score, so the gravity sim is the ranking: an empty query leaves every command in calm staggered orbits, typing pulls strong matches into tight fast orbits while weak ones destabilize, fling off and despawn, and Enter consumes the winner into the horizon glow.

  27. TOC Minimap Mercury

    TOC minimap where scroll progress is a column of liquid mercury — a gooey SVG blob climbs the rail, absorbs section ticks, teardrops under fast scroll, and bulges toward hovered ticks.

  28. Dock Cursor Magnify

    Cursor-proximity magnification row with Gaussian falloff — macOS-dock physics for any children.

All categories