---
title: "A Powerful Section, Simply Called Menu"
description: "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 cr"
canonical_url: "https://www.goodbarber.com/blog/a-powerful-section-simply-called-menu-a510/"
lang: en
date: 2014-11-14
last_updated: 2017-06-14
---

# A Powerful Section, Simply Called Menu

[Back](/blog/make-it-r13/)

# A Powerful Section, Simply Called Menu

Written by [Jerome Granados](https://www.goodbarber.com/blog/author/jerome-granados/)  on Friday 14 November 2014· Last update: Wednesday 14 June 2017

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10998761.jpg?v=1415892409.421677)

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

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10999078.jpg?v=1415893520.7989922)

**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

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10999390.jpg?v=1415895576.1584208)

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

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10999606.jpg?v=1415896318.6862257)

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).

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10999683.jpg?v=1415897187.7300377)

## Contextual settings

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/7171282-10999687.jpg?v=1415897912.0057285)

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?

- [#Design](https://www.goodbarber.com/blog/tags/design)
- [#Navigation](https://www.goodbarber.com/blog/tags/navigation)
- [#Section](https://www.goodbarber.com/blog/tags/section)
- [#Update](https://www.goodbarber.com/blog/tags/update)

![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg)

About the author[Jerome Granados](https://www.goodbarber.com/blog/author/jerome-granados/)CMO

I am the CMO and a partner at GoodBarber.

Through this blog, I share practical tips to help you get the most out of GoodBarber, insights into the trends shaping mobile and no-code technologies, as well as a few thoughts on the impact of artificial intelligence on our industry.

If an article sparks a question, an idea, or feedback, let’s discuss it in the comments.

[Read more](https://www.goodbarber.com/blog/author/jerome-granados/)

[![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)