---
schema_version: "1"
id: d9a928f7fbb90b4a027ed4645ca007c214a3b15280db2d752f8e82b9963d0979
title: Customize the Flow Header with an Aura Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-flow-screens-replace-header.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-header.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 8bd9fe8e39516a7be0dd2fddb404ab563fddb796e02b1b3d70de293dc208fc83
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Customize the Flow Header with an Aura Component

To replace the flow header with an Aura component, use the `screenHelpText` parameter from the `lightning:availableForFlowScreens` interface.

By default, the flow header includes the title of the flow that's running and a button, where users can access screen-level help.

In this example, instead of displaying the flow title and the help button, this component (`c:flowHeader`) displays the company logo and the help button. The help text appears in a tooltip when the user hovers, instead of in a modal when the user clicks.

![A custom flow header](https://developer.salesforce.com/media/aura-platform/flow_customheader.png)

Since the component implements `lightning:availableForFlowScreens`, it has access to the `screenHelpText` attribute, which contains the screen's help text if it has any.

```nolang
<aura:component access="global" implements="lightning:availableForFlowScreens">

   <div class="slds-p-top_medium slds-clearfix">
      <div class="slds-float_left">
         <!-- Display company logo -->
         <h2><img src="{!$Resource.Logo}" alt="A.W. Computing logo"/></h2>
      </div>
      <div class="slds-float_right" style="position:relative;">
         <aura:if isTrue="{!v.screenHelpText ne null}">
            <!-- If the screen has help text, display an info icon in the header.
                 On hover, display the screen's help text -->
            <lightning:helptext content="{!v.screenHelpText}" />
         </aura:if>
      </div>
   </div>
</aura:component>
```

**See Also**

- [Customize the Flow Footer with an Aura Component](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-footer.md)
- [Dynamically Update a Flow Screen with an Aura Component](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-form.md)

- [_Component Library_: lightning:availableForFlowScreens Interface](https://developer.salesforce.com/docs/component-library/bundle/lightning:availableForFlowScreens/documentation)