Back

A Powerful Section, Simply Called Menu

Written by on Friday, November 14th 2014

A Powerful Section, Simply Called Menu
Today, let's discover a very powerful section recently added to GoodBarber. It is called Menu and it has only one purpose: to give you the power to create a multi-level navigation inside your app.

9 navigation templates

A Powerful Section, Simply Called Menu
Menu is a section you use to access other sections.

It comes with nine different navigation templates. Our designers have created four styles with two versions each and, as usual, there is an open html mode for savvy developers :
- Visual / Visual color
- uneGrid / uneGrid color
- Grid / Grid color
- List / List color
- html

But before designing the Menu section, you need to add content to it first.

Sub-sections

A Powerful Section, Simply Called Menu
Start by adding a Menu section from the content menu. Menu behaves like any other type of section. Name it and position it where you want in your root navigation.

Once you have added a Menu section, you'll see in the contextual panel that it is possible to add sub-sections. Hold the cursor over the name of the Menu section, and click the green Add button.

You can add any type of section into a Menu section, even another Menu section itself, in case you need a deep navigation structure in your app.

Beautiful design

A Powerful Section, Simply Called Menu
Now that you have added sections into your Menu section, let's see how to design it.

Go to the Design > Advanced and click on the name of your Menu section. 

First of all, you must choose a template. Consider each template as a launcher to open the sections included in Menu. Depending on the style you want to give to your "launcher", you will go for a template where you upload your own images (as in the example above), or use colors and icons (example below).

A Powerful Section, Simply Called Menu

Contextual settings

A Powerful Section, Simply Called Menu
Depending on the template you choose, you'll have contextual settings to adjust the design the way you want.

To give you an idea of the endless possibilities you have, let's discuss the example above :
- I have chosen the Grid template.
- I have 5 sections in my Menu.
I used a different image for each section.
- I have chosen to display the name of the sections.
- I have an image in the background (as you can see, I used a different image for the tablet version of my app).
 

It might be a good idea to make a video to show you how it works in even more depth. What do you think?



@Max It's an Amazon shop section. You can find it under Content > Add a section > E-commerce.
We support e-commerce sections for Amazon, Shopify and Etsy. More info in this blog post [http://blog.goodbarber.com/Create-an-App-for-Your-E-commerce-Business_a503.html]url:http://blog.goodbarber.com/Create-an-App-for-Your-E-commerce-Business_a503.html

http://blog.goodbarber.com
And what is the icon with a basket? This section is not yet in the release.
this is really good... good work guys

Enter your email address