POWERFULLY SIMPLE NAVIGATION AND MENUS


S01 | E06 | HOW TO MAKE A WEBSITE, LIKE A PRO

Paul Davenport |  6 min read |  6 min video

Menus & Navigation

VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

MOBLE CMS allows your website to have an unlimited number of menus. If you're familiar with just having one main menu on your website, you might well be wondering what you need all these menus for...

This article is a practical session to show you how to create your Header menu. Then, we'll look at how you create other types of menus, such as slide-in Menu Drawers, Mega menus, Footer menus, Sidebar menus and even menus in your Body Content.


HOW TO CREATE YOUR HEADER MENU:

The Header Navigation Menu is the menu that sits in your header. This menu can have multi-level dropdowns menus, also referred to as sub-menus.

In Series 2, Episode 2, we learn how to create and customise your Header. When creating your Header if you select a Menu Navigation, it will automatically include your Header Menu. It's perhaps also worth pointing out that your Header doesn't only need to include your Navigation, it can also include your Logo, Action Button, Search, and even a Hamburger Menu icon to open your Menu Drawer, jump ahead to Series 2, Episode 2 at any time. 

To create your Header Menu, you'll need to head over to the Navigation area:

  1. Click the Main Menu icon in the top left and select Navigation. 
  2. Notice a range of Headers that have been created for you and Click 'Edit' next to the 'Header Menu'
  3. Click the '+ Add' button in the top right to Add a new Menu Label
  4. Notice that you can Link to Pages that already exist, or if you are creating a New Page, you can create it here and it will automatically be created and located in the Pages area.
  5. Once you create a new Menu item, notice that you can drag it into position. 
  6. You can also drag it into another menu item, to automatically create a dropdown sub-menu.
  7. You can easily Rename Menu labels and remove any menus that you do not require.
  8. It's best to have a play as you should find it intuitive and very quick to play around until you are happy.

Header Menu on MOBLE.com showing the Sub-Menus for CMS Plans

PRO TIP

You can save lots of time by using the Navigation area to initially create the bulk of your website pages, when you are first setting up your website. Sure, you can also create new pages in the Pages area, one at a time, but here in the Site Map area, you can create many new pages extremely quickly to reflect the pages that you decided on in your Workshop.

Now that you are familiar with creating Menus let's look at the different types of Menus that are available to you to consider for your website.

Drop Down Menu

Header Menu with a Dropdown Menu. Unlimited Sub Menus are automatically created.


DRAWER MENUS

Drawer Menus are 'Off Canvas' menus that slide onto a page. The functionality initially came to the fore for mobile apps, when designers realised they would also be incredibly useful space-saving tools both on mobile and desktop websites.

Drawer Menus are loved by marketers too, since now we can conceal less important pages in the Drawer, allowing to only display the most important pages in the prominent Header Menu. This technique has an incredible effect on conversion rates and we strongly urge you to consider using your Workshop data to select the most important pages (and perhaps a telephone number) for your Header. Then, use a Drawer Menu for your other pages, that will still only ever be one click away.

A Drawer Menu on MOBLE is either used to slide-in from the Right, Left or Top of the page.

A Hamburger Menu icon has universally been used to open Drawer Menu. It inherited its name since the icon is three stacked horizontal bars, that look rather like a hamburger   .

On mobile devices, the Drawer Menu automatically replaces your Header Menu, as standard, therefore still consider placing pages from your Header Menu into a prominent spot in your Side Drawer Menu, so that they are always easily accessed.

SIDE DRAWERS

Side Drawers slide in either form the Right or the Left of the page. A nice technique is to create your Site Map as a Side Drawer, since Side Drawers are multi-tiered (you can have as many sub-tiers as you like), it's a great idea to include all of your website pages to make a Site Map to make all your pages easily accessible on all devices.

Site Map Menu, shown here as sliding in from the right. Again, unlimited Sub Menus are automatically created.

MENU SECTIONS

As we learned in the last Episode, Sections are special types of pages and one of the most popular is the Menu Section. A Menu Section allows you to use the Visual Page Editor to design your own menu exactly how you like it. Therefore, you can include Images, Forms, Videos, whatever you like. You have the complete unrestricted creativity to design as you wish.

Menu Sections operates much like the Side Drawer Menu and if selected, it will automatically replace the Side Drawer Map Menu. You can decide to choose either a Side Drawer Menu or a Menu Section as follows:

  • Go to Styles, via the Main Menu.
  • In the Headers Tab click the 'Customise' button on the right side of the Page.
  • Now select Menu Section, the default is set to Side Drawer Menu.


In the Video below, we reference the Menu Section for www.dirtyfeet.com.au.

Notice that this Menu has 4 columns and 2 rows, it includes a special tiled background and even includes a donation form to optimise conversions. Every time somebody goes to the Menu, they see the donation form which continually and intuitively promotes donations without ever having to ask directly.

This demonstrated the power and flexibility of Sections on MOBLE, to create anything you like.

To access your Menu Section and Edit it:

  • Go to 'Styles', via the Main Menu.
  • Click the 'Sections' Tab and 'Edit' the 'Menu Section'. *
  • When you click 'Edit' the Page Editor will open. Notice that the Layouts Drawer will automatically be open with a selection of pre-made Menu Sections for you to select from to get started quickly.
  • You can come back to these Layouts, by opening the Layouts Drawer at any time. Simply open the 'Base Layouts', then 'Sections', then 'Menu Sections'.

* Such is the importance of Sections, that for your convenience, you can also access the Menu Sections and other Sections via the Navigation area, plus via the Sections Tab in the Pages area.

Top Drawer! A Menu Section on www.dirtyfeet.com.au  is used as Top Drawer.

DirtyFeet Layouts Drawer Menu Section

A selection of Menu Sections, are available in the Layouts Drawer


SIDEBAR MENUS

Sidebar Menus can be extremely useful to display categories of pages. An example of a Sidebar Menu is on this very page, where you can see a Menu for Series 1 on the right of the page.

You can set a Sidebar with a Menu as follows:

  • Create a new Menu as normal, and give it a relevant Name.
  • Next, create a new page.
  • Notice that there are Sidebar Layout Pages already made for you. Simply open the Layouts Drawer, select 'Base Layouts', and then 'Sidebar'.
  • Click on the Sidebar and the Menu Component opens up. You will see your new Menu Name in the list, select it and your menu will appear in the Sidebar.

To add new Menu components on to your page:

  • Select the Block mode.
  • In the frame where you would like to add the Menu click the '+' icon in the Frame tools.
  • Select the Menu Component
  • Now you will see a List of all your Menus, select the Menu that you would like and it will automatically drop onto your page.

Drag in a Sidebar from the Layouts Drawer, then pick your preferred Menu.

Adding Menu Components to a SideBar

Adding Menu a men components to a Frame in a Sidebar.


MEGA MENUS

When you create sub-menus in your Header Menu, as standard a dropdown menu will display the sub-pages.

Mega Menus are special Menus that replace the downdown menu with a series of columns, images, and/or forms, as you can see in the example image below.

Like Menu Sections and Sidebar Menus, there are many Mega Menu Layouts to choose from in the Layouts Drawer.

You can create and assign a Mega Menu to the Header Menu as follows:

In the Navigation area:

  • In the Header Menu create and name a new Menu Item e.g. "Services".


In the Pages area:

  • Next, in the Pages Area, add a new Page via the '+ Page' button in the top right.
  • It's very important to name the page with 'Menu' followed by a space, and then name them exactly the same name as your Menu. Like this: "Menu Services".
    This ensures the new page has a URL with "menu-" prefix, and the URL for the new page will be created as "/menu-services"
  • Now your new "Menu Services" page will be automatically linked to the corresponding page in your Menu.
    I.e. The 'Menu Services' mega menu page, with the URL '/menu-services', will be automatically linked to a menu label that has a page called 'Services' with the URL '/services'.
  • Finally, ensure you group the new Page as a "Section" and "Hidden" (as shown in the image below)
  • Click 'Create'.
Naming a Mega Menu Page

To create a new Menu Page, ensure the page is named as "Menu Name", and is grouped as "Section" and "Hidden".

In the Page Editor:
  • Now in the Page Editor, open the "Layouts" drawer from the top right.
  • Select "Base Layouts", "Sections" and select "Mega Menus".
  • Drag your preferred Mega Menu Layout on to your Page, and customise it as you wish.
  • Save and Exit your Page. Your Mega Menu page section is now linked to your Header Menu.

Workspace365 Mega Menu

A Mega Menu slides down a section rather than a traditional dropdown menu. Here you can see the Workspaces tab displays 4 columns. In the first threes columns, a Menu Component has been added in the same way we added the menu to the Sidebar above. Three Menus have been made for Sydney, Melbourne, and Brisbane. In the fourth column, a Form is used to encourage more enquiries.


BODY MENUS

Since menus are so easy to create on MOBLE CMS, there is no reason why you can't include menus in the body of your website pages. 

Now that you know how to create new menus and add a menu component to a page, there is no limit to the creative options. The possibilities are endless and give you enormous power to help users find what they are looking for.

Possible uses  for Menus in the body of your page include:

  • Top Features
  • Best Sellers
  • Quick Links
  • Most Popular Pages
  • Link Banks
  • Help Information

You can add a Menu anywhere on an any page.