Priority navigation

A horizontal navigation that keeps as many items visible as fit. Lower-priority items move into a "More" overlay when there isn't enough room. Works without JavaScript via a checkbox + media-query fallback.

Basic usage

Resize me

Drag the handle on the right to shrink the container and watch items move into the More menu.

collapseAt='sm'

At sm-and-below the entire strip collapses into the More menu.

Noscript fallback

Open DevTools, disable JavaScript, and reload the page. The strip continues to work:

• Items hide via CSS media queries based on each item's hideBelow input.
• The "More" toggle is a <label> tied to a hidden <input type="checkbox">.
• The overflow menu shows via the :checked sibling selector — purely CSS.