Tips with building large mobile Nav Menu

Hi guys, hope you’re all having fun designing in Sparkle.

I thought that I would introduce this tip, and I think it will help those of you that are new to Sparkle or have not ventured into designing a mobile nav menu yet.

If you have many pages on your website, then creating a mobile nav menu that is functional / clean / and works well can be quite challenging.

Sparkle has a way of helping you build out a mobile nav menu when your website has many pages!
What you need to do is think about is how are you able to organise all those pages so that they are manageable!

In Sparkle you can create ‘Sections’ and each section will be the top navigation menu for your website.

Lets say we are building a Music Store. We could create three sections:

  1. Products
  2. Books
  3. Support

Each SECTION would then contain the relevant pages:

1. Products section will contain:
Monitors - Mixing Desks - Microphones - Guitars - Keyboards

2. Books section will contain:
Mixing - Recording - Business - Song Writing

3. Support section will contain:
Technical - Account - Website

So by doing this, it keeps the website well organised and also a mobile navigation menu that works!

You can do a surprising amount of custom design so that the Sections Top Nav menu stand out, and another custom design for the sub pages of each section etc.

Have a look at this example I created to demonstrate the above using SECTIONS.

Hope you find this useful,

Best,
Scott

5 Likes

Thank you Scott. :+1: :slightly_smiling_face:
Good tip and explanation.
I’m sure many will find this useful …

1 Like

Excellent piece on menu navigation and how to better the experience on mobile! :slight_smile:
I was thinking (what do you think?) that I would keep the home page seperate to the sections, only because users don’t usually search for a home page in the sub-menu dropdowns.

But overall @rimram, loving it! :slight_smile:

1 Like

Yeah, actually that was not meant to be like that, realised after I posted it! Haha. Thanks though;)

EDIT: Corrected

Home page plus 3 Sections

Best,
Scott.

1 Like

Thanks @rimram. Great pointers for newbies.
~Bill