const {
visibleItems,
overflowItems,
containerRef,
menuItemRefs
} = useDynamicMenuItems({ menuItems, gapWidth: 20, moreButtonWidth: 72 });
...
return (
<div ref={containerRef}>
{visibleItems.map((item, index) => (
<div ref={(el) => {
menuItemRefs.current[index] = el;
}}
>
{item.name}
</div>
))}
</div>
)
Hook that dynamically updates how many menu items are visible in a navbar based on the screen size / container width and the collective width of the menu items in the DOM + the size of the gap between them.