# 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](https://bubble.is/plugin/feather-icons-1553889862898x186125300131692540) (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](https://feathericons.com/). \ \ 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 ![](/files/-LeO-dfgRVIz_LNrAGf3) 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. ![](/files/-LeO6fYXwnXV7ThynJjN) ### 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): ![](/files/-L_njnyiNG71NXj8REzp) * **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: {% embed url="" %} * **Portal page? yes / no state** - When you add a [portal page](https://canvas.airdev.co/resource/portal-dashboard-page-1541199301879x207238372182473540) 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"](/files/-L_nnOsQYA8T2YqVgIyr) * **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`. ![](/files/-L_noCl3ADhRpwMQ2-MO) * **Search page? yes / no state** - When you add a [portal search page](https://canvas.airdev.co/resource/search-page-1541199371286x774569242727011500) 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. ![](/files/-LeNsei0al09_DLmhOF1) ### Header menu items ![](/files/-LeNt0pTEq0tkhLl5yWa) 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](/canvas/2.0.0-1/using-the-template/setup/features/header-menu.md) 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 ![](/files/-M3wn1hhmk4hVQik1ve5) The [popupreusables reusable element](/canvas/2.0.0-1/using-the-template/reference/reusable-elements/popupsreusable-1.md) (which includes the [Signup/Login reusable](/canvas/2.0.0-1/using-the-template/reference/reusable-elements/signup-login.md) 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.airdev.co/canvas/2.0.0-1/using-the-template/reference/reusable-elements/header.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.