ns-ui

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.

Use when the site-nav shell itself — a bar plus an always-reachable menu trigger that opens a real, focus-trapped sheet — where the scroll condense is a plain threshold state, not the point. Reach for nav-condense-rail instead when the condense transition itself is the deliverable and needs to be continuous and measured from the bar's own rendered height; reach for header-scroll-pill when the destination shape should morph into a small floating pill with a rolling active-section label. Neither of those two ships a mobile sheet or a focus trap — this one exists to be the one that does.

Install

npx shadcn add https://design.helpmarq.com/r/nav-site-condense.json
  • nav
  • header
  • navigation
  • sheet
  • dialog
  • scroll
  • mobile
  • focus-trap
ns-ui

ns-ui

ns-ui / nav-site-condense

Scroll to condense the bar. Click the menu button to open the sheet.

The trigger is present at every width — it doubles as a full sitemap even on desktop. Tab to it, press Enter, then try Escape.

Section 1

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 3

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 4

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 5

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 6

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 7

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 8

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 9

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 10

Filler content so the page actually scrolls past the condense threshold. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Props

PropTypeDefaultDescription
brand?string—wordmark / brand text
linksNavLinkItem[]——
condenseAt?number—px of scrollY past which the bar condenses. default 24
className?string——
Back to the catalog