header
Header Reusable Overview
We put the standard reusable header on nearly every page, which is fully-responsive, and includes a lot of helpful features:
Sign up or log in from the header
Click on menu item links to navigate to a different page
Click on the logo or favicon to return to the homepage from any page
Trigger custom workflows to show different popup types
Key Elements
Header icons
The header uses Feather Icons (please ensure you have the Feather Icons plugin installed in your Bubble app).
Please note that you will not be able to preview the feather icons in the Bubble editor. However, you can preview the icons by going here. Once you find the icon you want to use:
Copy the icon name
Go to the bubble editor and click on the feather icon you want to change
Click on type dropdown
Open browser search function (command + f on mac or control + f on windows)
Paste the icon name and click enter
Select the icon name from the feather icon type dropdown
By default, we've included three placeholder feather icons in Group Loggedin in the header. Only the search icon is visible in the app and it navigates to the search page.
Header states
The header reusable uses four states (states are often used in reusable elements to pass data between the reusable element and the page):
Dark? yes / no state - If Dark=yes, then the default logo, favicon, button, and link color in the header will be white. If
Dark=no, then the default logo, favicon, button, and link color in the header will be the app's default color. Please see an example of this below on the index page:
Portal page? yes / no state - When you add a portal page to your app via Canvas Pages, there will be a workflow on that page for
When page is loaded,set header's portal page? to "yes".This will hide the favicon (Group Logo Mobile) and show the portal menu group (Group portal menu) in the header on mobile.
Show portal menu? yes / no state - On mobile (when on a portal type page), you can click on the portal menu in the upper left corner to open the sidebar menu. This is achieved by setting the state of
Show portal menutoyes.
Search page? yes / no state - When you add a portal search page to your app via Canvas Pages, there will be a workflow on that page for
When page is loaded, set header's search page?toyes. This will hide the favicon (Group Logo Mobile), show the portal menu group (Group portal menu), and change the hamburger menu icon to a search icon in the header on mobile.
Header menu items
The menu item links in Group Desktop Menu Items and GroupFocus Mini should trigger the same custom workflow for that menu item #. You should customize the menu of navigation options when someone clicks on their name.
Key Workflows
Header custom workflows
The header will come will various custom workflows that you can trigger from the page. You can do so by going to the workflow tab in the Bubble Editor and selecting Custom workflow > Trigger a custom workflow from a reusable element > Select header from the dropdown and the custom workflow name
The popupreusables reusable element (which includes the Signup/Login reusable popup) is included in the header, and can be triggered from a custom workflow.
Last updated
