Menus & Navigation
The Canvas template has three main navigation reusable elements: the Header, the Footer, and the Menu Focus Group.
Header navigation
Element name: header Purpose: Provide easy navigation and actions to the user throughout the application.
The header is a fully responsive reusable element and is used on every page of the Canvas template.
When being viewed by a user that is not logged in to the application the header will display a logo, menu links, and buttons for logging in or signing up to your application.
When viewed as a logged in user the header will display a logo, a set of three widgets (search, shopping cart, and notifications), and a profile image with a dropdown menu that includes links to the users profile account page, Admin portal (if an admin), and a log out action.
You can make changes to the links visible to logged out users directly from the admin portal. For the actions available to your logged in users you will need to make changes from the Bubble editor.
For logged out users
To set up the links visible to logged out users, go to your admin portal and navigate to the Header/Footer section from the left menu. From here you can add, edit, and delete menu links, change the display order, view both mobile and desktop previews, and set the destination links and icons for each option.
To change your logo navigate to Branding > Logos in the admin portal
For logged in users
To add new actions and links to pages for your apps users you will need to open the header reusable in your Bubble editor
Change text on the Signup/Login buttons
From the elements tree, click the '+' to open Group Header > Group Loggedout. You'll see the buttons for both Login and Signup here. Click on the one you want to change and update the text in the property editor.
Remove the icons from the header
From the elements tree, click the '+' to open Group Header > Group Loggedin. Select the groups that you would like to hide and uncheck the 'This element is visible on page load' option on the property editor.
Updating the header dropdown menu
Manual updates to the dropdown menu will need to happen from the Bubble editor as well. With the header reusable open in the editor, click the '+' to open the GroupFocus Mini in the elements tree.
This group contains all the elements of the dropdown menu within the following groups.
Group Loggedout Menu
This is shown only to logged out users and contains the login and signup buttons. There are also three placeholder buttons that can be edited if you would like to provide additional actions for your logged out users.
Group Logged in
This is shown only to logged in users and by default contains a button for logging out as well as buttons to navigate to the Account page and the Admin portal page.
There are also seven placeholder buttons here you can customize and add additional actions to.
Group Pages list
You should not edit this group as it is populated by the page links you set up in the Admin portal.
Placeholder button refers to a fully designed button element that has been hidden by default but can be unhidden and used as needed in your application.
Footer navigation
Element name: footer Purpose: Provide the user with links to important pages and information at the bottom of the page.
In contrast to the header navigation, the footer navigation is customized entirely in the Admin portal of your application. Navigate to Headers/Footers from the left side menu to get started.
The footer element is included by default on all marketing pages. For Bubble pages you will need to add it manually.
Set up page links
You can set up footer links to any internal or external page in the pages tab. These can be the same pages you set up in the header or completely different.
Customize your legal pages
The Canvas template comes with default Terms and Privacy pages and you can edit all the settings and content for these pages from the footer navigation settings.
These page contain references to text that needs to be changed. If you search for all references of the word "Sample" and replace those with an appropriate word (usually the legal name of your company), that is a start, but you should also determine if the content of the documents is appropriate for your application.
We have compiled a list of resources to help you get started with customizing your legal pages.
Privacy Policy resources Terms of Service resources
Add your social media profiles
Get the most out of your efforts by adding all your social media pages to the footer of your application.
Dropdown menu
Element name: menufocusgroup_template Purpose: Provide the user with a concise list of actions they can take in a convenient dropdown menu.
The dropdown menu is used consistently throughout the Canvas template to provide the user with actions they can take such as Edit/delete a thing, View more details, Send a message, etc.
The dropdown is triggered by clicking on the icon, can be dismissed by clicking anywhere outside the dropdown, and is most often used in repeating groups to provide action items for each thing in the list.
Clone the reusable template
Open the menufocusgroup_template and from the top bar of the Bubble editor click Edit > Clone this Page.
Assign the type of content
With your cloned menufocusgroup_template open, double-click in the gray area of the editor to open up the settings for the reusable. Change the 'Type of content' to the datatype you will be using this menu to edit. You will need to change the type of content for the GroupFocus Dummy as well.
Set up the dropdown buttons
In the elements tree click the '+' to open the GroupFocus Dummy. This group contains all the dropdown buttons in the menu. Group Option 2 and Group Option 3 are already set up as the Edit and Delete actions.
There are three more Group Options (1, 4, & 5) that are unused and can be customized to add more buttons to your menu. Each of these groups has a corresponding event in the workflow tab that will be run when the group is clicked.
The menufocusgroup reusable element also contains two popups that correlate to the Edit and Delete actions:
Popup Edit Clicking on Option 2 (Edit) in the dropdown will open a standard edit form popup to create or edit a thing.
Popup Remove Clicking on Option 3 (Delete) in the dropdown will open a popup to remove a thing.
Customize/duplicate these popups to your purposes.
Using the custom events
Each popups can be triggered by the corresponding custom events 'Create/edit thing' and 'Remove thing'.
Setting up custom events within a reusable gives you the option of using that workflow from the page it is on with the 'Trigger a custom event from a reusable element' action.
For example, you can add the menufocusgroup_template element to the hidden variables popup on a page and trigger a custom event to create/edit or remove a thing.
Last updated
