Multilevel Navigation Menu in Solo Theme

I am trying to create a multilevel vertical navigation menu in the Solo theme based on a original theme I was using in Hugo. I already followed the solution from this post: Add Dropdowns to Main Menu Through the Site Admin (Copy & Paste into Site Header/Footer Injections).
I get the dropdown menu part but I am not able to successfully create a multilevel navigation.

This is what I originally had in the Hugo theme:

This is what I currently have:


After inputting the code from the mentioned post, this is how I tried to set up the navigation in my admin:

Ideally I would like to have my navigation have the same structure and similar look to what I originally had in the Hugo theme. Each plus sign contains more categories under another topic, an example can be seen under the R section Dealing with Data.

If it is not possible, is there any other way I can organize the information? Thank you in advance.

Ghost-CLI version: 1.24.0
Ghost version: 5.26.4
Solo Theme: v1.0.0
mac Os Ventura 13.0.1

Given the length/complexity of your navigation menu, I would either make a page that contains this menu or code it directly into the theme.

If you create a page that you link to with these topics, then you can create them however you like, without having to modify Solo’s code, which will make it more maintainable down the line. You lose, though, the ability to add this as a menu to your site. (Do your analytics show visitors using the large menu? Or would fewer choices work just as well?)

The other option is to code this directly in your theme, which would allow you to match your menu to the one created in Hugo. The downsides here are that the navigation items won’t be as easily editable and you’ll need to merge any future updates to Solo.

Thank you for pointing me to the right direction. I wanted to try to create the same as I had in Hugo because I thought it would be easier for the user to go back to any topic or skip any topic they wanted. Since it is complex I think I might try the first option suggested. If I wanted to create a page for a topic, how would I do that since most of the content would be for paid members only?

You can use tags to create topic pages. In Ghost, whenever you tag a post, a page is created that features all the posts tagged with that topic.

For example, from your menu, you can tag a post with Python. Then, all posts with Python will appear at yoursite.com/tag/python. You can also use that link in your navigation to create a link to that collection.

Let me know if that’s what you’re asking about or if you have any other questions!

Is there any other way other than using tags? I would like the link to be mysite.com/python/topic1 instead of the mysite.com/tag/python/topic1.

You can change the URL structure for taxonomies:

It gets a bit trickier when doing nested tags/topic like python/topic1. I’d search the Forum to see how people have approached it as well as this tutorial on building custom collections:

Great! Thank you very much for your help.

1 Like

@kosar there is also the Megamenu kindly contributed by @themeix.official @themeix here on Github…

You can see it in action here…

Thank you, I will check it out.

Edit: I just tried it, and it worked perfectly on my theme. It gave the submenu that I was trying to accomplish.

1 Like

@denvergeeks Is there a way to make the submenu item that has children toggle rather than hover? For example, I would like the Dealing with Data, Machine Learning, and Visualize section (shown below) to toggle rather than hover when you select the mentioned topics. Is there a way to do that with the ghost-dynamic-dropdown?

I’m sure there is a way to do that.

I would contact @themeix, he is very reasonable with his rates.