Navbar that tucks links into More
When space runs out, the last links move into a More menu with a counter; drag the handle or change the width to watch.
Settings
Code
<div class="uvq12-pp"><nav aria-label="Main"><a class="lg" href="#"><i aria-hidden="true"></i>North</a><ul class="ls"><li><a href="#" aria-current="page">Home</a></li><li><a href="#">Product</a></li><li><a href="#">Pricing</a></li><li><a href="#">Customers</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul><div class="mr"><button type="button" aria-expanded="false" aria-controls="uvq12-pp-m"><span>More</span><b>0</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul class="mm" id="uvq12-pp-m"><li><a href="#" aria-current="page">Home</a></li><li><a href="#">Product</a></li><li><a href="#">Pricing</a></li><li><a href="#">Customers</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div><span class="hd" aria-hidden="true"></span></nav></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
The priority plus pattern for responsive menus: links stay in the bar while they fit, and the ones that do not move into a More dropdown with a counter that bumps on every change. A resize observer recalculates on any width, so it works in sidebars, cards and real headers. The current page is marked in both places, and the dropdown works with arrows and Escape.
Use the width slider or drag the handle to test it, and set the main and secondary colors for the active link. Order the links by importance, since the last ones are the first to move.