Vibeset

Branch menu

Groups that open with their options inside, joined to the group by branches that are drawn on opening and withdrawn on closing: what says those options hang from that group and no other. It is not an ARIA tree: that role promises the reader arrow-key navigation that has to be programmed in full, while a nav with lists and buttons with aria-expanded is operated with the tab key, which everyone already knows. If an option has an href it is a real link, because a bare onClick leaves a search engine unable to reach it. Folded content carries inert so focus is not lost inside something that cannot be seen. And each branch is drawn by the option it joins, so adding or removing options does not require touching anything else.

And the React Bits original: Branched Menu

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Branched Menu, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For docs navigation or a file tree, two levels deep. With many more levels it stops reading well.

Watch out for

It is only a menu: the route and the link for each option are yours. If each option is a page, use real links and not just onSelect, or a search engine will not reach them.

Accessibility

Six aria signals, keyboard and reduced motion.