[New Template] Main menu



E31EC1A3-77BF-4571-80B8-6F5A9D4B22A3

Hi Bubblers,

Under the brand name Building Blocks, I created my first template called “Main menu”. It’s a main menu for apps with a sign up, log in and account functionality. It took me three days to design the menu in a way that it is as functional in desktop modus as it is in mobile modus. Take a look at Main Menu Template | Bubble.

For the record; I did not design an account page or redesign the basic sign up and login form of Bubble itself. I just focused on the main menu and the side menu which activates in mobile modus.

My motivation

As a Bubble developer I often struggle in the beginning of a project with building up an app with the basics. To begin with; the main menu.

As most current templates in the market place are or way to complex to build an app from scratch or are not perfectly designed (responsiveness, pixel perfect, functionality, ui, consistent use of element names and styles) I decided to develop building blocks for the community.

Template Main menu

This template currently contains one main menu for full width pages (1200px) for apps with a sign up and login functionality.

Details

  • Full width header menu

  • Fully responsive

  • Dropdown menu for account with four menu items (activated by user icon when logged in)

  • Mobile side bar menu with main menu items and account menu when user is logged in

  • user email shown when logged in

  • Bar menu kicks in < 1140 px

  • Logo image 230 (max) x 60 px

  • Logo without text 40px x 40px kicks in < 600 px

  • Manage responsive height of header menu and mobile menu items yourself by adjusting only two values in the design editor)

  • custom styles with consistent style names for easy search

  • Properly chosen element names

  • Build as a Reusable group element (To make it floating, just place the menu in a floating group)

Roadmap for this template

Version 2 - expand functionality

  • Top menu for contact details (Manage show or hide in design editor with one click)

  • Secondary horizontal menu in desktop modus (Manage show or hide in design editor with one click)

  • Secondary menu integrated in mobile menu (Manage show or hide in design editor with one click)

Version 3 - documentation

  • insert menu in a new page

  • insert menu in a new page as a floating group

  • Style menu with styles

  • Manage height of header menu

  • Manage height of mobile menu items

  • Remove menu item

  • Change image logo to a text logo

Version 4 - Requests

  • Maybe a mobile only header? Requirement suggestions are welcome.

Pricing

I sell this template for 20 dollar (Believe me it’s worth it, as It took me 3 days to design the menu in detail). Once version 3 is in place the template wil go up to 25 dollar.

Demo

Check the difference between logged in and logged out in the main menu. You can log in at the top of this page with these credentials:

Template: https://bubblio-main-menus.bubbleapps.io/

User: demo@demo.com

Pass: demo

Screenshots

Seperated account menu for desktop version, activated by user icon

E8AC9ABC-72A9-47A1-8BC0-8CAE71456766

Mobile side menu with account menu integrated. When dropdown icon is clicked main menu is hidden and account menu appears.

58B08D0B-CF90-4CD2-945B-A22FD96CEA2D

Adjust height of mobile menu items for landscape mobile screens. This can be done in the design editor by adjusting one value.

3DD97C16-4F56-4107-A004-3B7B89B3787B

Custom styles with consistent style names for easy search

Properly named elements

2 Likes

Good job on your first template! :slight_smile:

I can offer some suggestions if you don’t mind.

  1. If a menu button is on the right side, the menu should come out from the right side. If it comes out on the left side it is unnatural and awkward.

  2. Also I think the menu at full length would make for a better UI/UX as well.

Just my two cents though.

Keep up the good work! Congrats on your first template. :+1:

1 Like

Hi J805,

Thanks for your suggestions. I appreciate that! I will have a look and think about showing the menu on the right.

About the sidemenu full length, I agree! Is there a way to make it full length? I have done research to that last year but could not find a solution then.

1 Like

I just use a floating group and make sure it is long enough to extend all the way down the page. Also the slidable menu plugin does that automatically.

I just released v 1.1. It has the side menu on the right side and a full length side menu and full length account menu depending on the viewport height. For the full length I used the free plugin “Toolbox” and some javascript code. Works like a charme.