Using

To use the Hook, first call it, telling it how many items your menu will have:

const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);

Take the buttonProps object and spread it onto a button:

<button {...buttonProps}>Example</button>

Create the menu with the role='menu' property and spread itemProps[x] onto each item:

<div className={isOpen ? 'visible' : ''} role='menu'>
    <a {...itemProps[0]} href='https://example.com'>Regular link</a>
    <a {...itemProps[1]} onClick={handleClick}>With click handler</a>
</div>

Style the menu based on whether the visible class name is present or not. For example, something like:

div[role='menu'] {
    visibility: hidden;
}

div[role='menu'].visible {
    visibility: visible;
}