Tree style menu where the branches are also links?

I have a tree style menu comprised of categories and their sub categories. There are quite a few categories and sub categories in total, so I would like to display the tree collapsed by default, and then allow users to drill down to the specific sub category they are interested in.

However, the problem I have is that I would also like to allow users to visit a main / sub category. Given a menu structure like so:

Main category 1
-sub cat 1
-sub cat 2
–sub sub cat 1
–sub sub cat 2
-sub cat 3
Main category 2

The user should be able to drill down to ‘sub sub cat 2’ or they should be able to just view ‘Main category 1’ (for example). I am not sure how this could be implemented. The standard way of organising a tree menu is that the branch / folder nodes are not links themselves, and so clicking them will show the sub categories contained within that folder. But with my desired menu structure, the branch / folder nodes are links, so clicking them would go to that page rather than allowing you to drill down.

One solution is using pop-out sub menus, where each folder shows the sub categories in a pop-out when hovered over. But this won’t work well when you have a large depth of sub categories.

I looked at Amazon, and it seems they only allow drilling down one level at a time, which does not seem an optimal solution to me. (Though maybe it is if Amazon are using it).

Does anyone else have any ideas on this?




It seems to me that you would need to have two trigger elements displayed at each level. The main text could trigger the link to the main sub menu page and then an icon next to it could trigger the dropdown instead. Much the same as the bootstrap split buttons here.

Many “tree menus” use plus or minus icons as the toggle for the dropdown portion of the menu which leaves the text available to be clicked as a link as per normal.

Obviously you can’t have two actions on one element so you will need to do something similar if that’s the effect you want.

Hi Paul

Thanks very much for your suggestion, those bootstrap split buttons look like a great solution.

The problem (IMO) with just using a standard + or arrow sign to act as a drop down link is that it may not be obvious that the + is a separate target to the text link. The user may think that just clicking the text link would display the child nodes. The split buttons make it obvious that both the drop down link and the text link are clickable. But by using a separate hover state for each, they also make it easy to see that each one is separate from one another. Just what I was looking for.



You can put multiple event listeners on a single element.

I’m still not sure what I’m on board for, but lots of the a11y people like the idea of arrow keys vs ENTER/TAB. You could do something like, hitting enter does what enter on links does, but using the down arrow key while focussed on teh link instead opens a submenu.

I dunno, the likes of Adobe have been trying (this is a mega-menu but you’d start with something similar anyway) and there’s some “tree” examples
some tree research and [url=]an experiment by sencha (that one doesn’t completely work in Opera for me tho)

I know I’ve been hearing a lot of stuff about trees and menus lately, so you could do some searches for stuff like “Filament Group” “Paciello Group” with tree and menu for ideas.