Tree like structure instead of dropdown

[suresh.raju]

Is there a way we can create like a tree like structure on the catalog as shown below.

Tree views in CSS

As an alternate approach, I created a typeahead dropdown something like the below but it trims off larger texts off the dropdown space. Also we don’t want to implement dependent dropdowns because we might require upto 10 dropdown then. Please advise.

Giant planets > Gas giants > Jupiter
Giant planets > Gas giants > Saturn
Giant planets > Ice giants > Uranus
Giant planets > Ice giants > Jupiter

[Ollie_Phillips]

The HTML used in the catalog in both standard and self-service personas is an unordered list (<ul></ul>), so you could attempt this but I think it would be more of a simple list you end up with, rather than tree view since the HTML is a single list. There is no embedding of lists as is used on your example to provide the tree hierarchy.