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. These icons will only be visible when a user is logged into the app. You may use these icons as links to navigate to other pages in your app.

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.

The portal menu will replace the favicon on mobile when you set the header state for Portal page? to "yes"

• 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.

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 the "show loader popup", "show message popup", "show login popup" and "show signup popup" custom workflows.