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.
Drag the handle on the right to shrink the container and watch items move into the More menu.
At sm-and-below the entire strip collapses into the More menu.
Activating a link or button in the More menu closes it and returns focus to More. A control that opens a menu of its own (aria-haspopup or aria-expanded), a form field, or a disabled item keeps it open. Narrow the window to below sm to try it.
A card header lays out a caption, the nav and a search box in a row. The nav takes only the room its items need, sits right after the me-auto caption, and collapses into More when the card gets narrow. Drag the handle on the right to try it.
In a plain block container the items stay at the start.
Open DevTools, disable JavaScript, and reload the page. The strip continues to work:
hideBelow input.<label> tied to a hidden <input type="checkbox">.:checked sibling selector — purely CSS.