Main Menu Nav / Redesign and introduction of Dropdown Menus

[aktdenis]

Main Navigation Issue:

The previous design of Akash website aimed for simplicity, making all pages accessible with a single click from the menu. As the website has grown and more pages have been added, this approach is no longer practical. To improve navigation and user experience, we need to introduce a menu with dropdown options.

Secondary Navigation Issue:

The same issue arises with the secondary vertical navigation which appears on most pages. With this approach, users have to click through different pages just to find out what options are available under each section. Also, these menus are difficult to replicate in mobile view, leading to a clumsy user experience where users must make multiple choices to find what they're looking for. As we continue to add new pages and content, these navigation issues could become even more problematic.

• Desktop - vertical nav reference:

  

• Mobile - vertical nav reference:

  

Note: This navigation was part of the theme website used to had. The website had a revamp in the beginning of the year and is using Astro atm. So, we're no longer obliged to stick to this solution.

Mentioning a couple of issues that could benefit with a redesigned menu:

• Providers information is scattered / issue: https://github.com/akash-network/website/issues/16
• Pricing is hard to reach, GPUs availability could be connected to pricing / issue: https://github.com/akash-network/website/issues/252
• Events are hard to find / issue: https://github.com/akash-network/website/issues/250 Etc.
• And several other issues were brought up during wg-website meetings or IRL conversations

Solution:

To keep the website's look and feel consistent, I suggest we use the same Tailwind library for designing "dropdown menus" or "flyout menus" as shown here.

Design of the main menu navigation:

• Network dropdown addition of new items; case studies + integrations we communicate "Stats" on a secondary level as an indicator it's an external link (opens in new tab)

  

• Development dropdown we communicate "Product & Engineering Roadmap" on a secondary level as an indicator it's an external link (opens in new tab - github)

• Community dropdown

  

• Ecosystem dropdown

  

• Design of the secondary menu navigation - this one is used when a user has already opened one of the pages with dropdown options. With this approach we're opening the doors for viewers to jump right at the content they might be looking for - without touching the dropdown menu again.

• Secondary menu in the mobile view introduces much more intuitive experience (unlike the existing menu mentioned above)

  

• Mobile menu with dropdown option

  

This issue serves as a starting point for further discussion and refinement.

[HoomanDigital]

This is great starting point to address these issues, we are just little bit skeptical about secondary nav when we already have the options in dropdown.. Can we have some better approach in case of desktop to avoid secondary nav??

[aktdenis]

True. All items are available in the dropdown. But with this approach users don't have to get back to dropdown to reach any of the sub-pages. + I believe it works very well in the mobile view with the option to slide between secondary menu items