header
Last updated
Last updated
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
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 menu to yes.
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? to yes. 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.
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.
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.
