Header frame custom branding migration

Interested in using the new Header frame and Navigation component? Check out what's changed and how to get started.

We’ve introduced a new customizable header frame in Retool, ideal for adding custom navigation to all of your Retool apps. To accommodate this new functionality, we’ve made some changes to how the app navigation bar and custom branding work.

If you’re on the Enterprise plan and have custom branding enabled for your organization, you need to opt-in to use this feature. Once you do, you’ll have several options to display your logo in Retool apps.

What's changed?

Previously, all Retool apps featured a navigation bar at the top, with the Retool logo (or your custom branding logo) on the left and a user menu, search icon, app navigation menu, and some edit and share functionality on the right.

When we set out to introduce a custom navigation component, we knew this configuration would need to change — stacking an app's custom navigation on top of this existing app navigation was not an ideal solution.

We believe that it's important that editors have flexibility when it comes to the appearance of their Retool apps. By eliminating the default navigation bar, we give you full control over how your apps and custom headers appear to your end-users. Now, your viewers will only see your custom navigation bar.

End user modeEnd user mode

End user mode

We’ve moved Retool-specific operations, like navigating apps and editing user settings, to a new floating user menu in the bottom left of the screen.

End user modeEnd user mode

End user mode

Customers on the Enterprise plan can also disable the Retool branding on the Branding settings page.

Note that your users with Edit permissions will still see a black editor-focused navbar when previewing the app, which allows them to switch between preview and edit mode in addition to other editor-specific actions.

Enabling the header frame

By default, the header frame is not enabled for Enterprise on-prem customers. You first need to opt-in to use the feature by clicking Enable now in the Branding section of your Retool settings. Note that once enabled, you will be unable to migrate back to the old navigation style.

Once enabled, the Branding page settings will change. To display your logo on your apps, you’ll need to use one or more of the following approaches.

Displaying your logo by default

If you previously uploaded a custom logo and/or applied a background color using the Branding feature, we’ll still show these in the header of each app.

Custom logo and background colorCustom logo and background color

Custom logo and background color

Editors can override this default behavior in individual apps by adding components or modules to a header frame.

To change this default behavior globally, toggle off the "Show custom logo in app header frame by default" setting.

Adding a navigation component with your logo

You can also add a custom navigation with a logo to any app. Simply search for “navigation” in the component picker on the righthand side of the editor and drag the component into the header frame.

With the navigation component selected, add a URL to your logo image and it will appear in the Navigation component.

Adding your logo to the header frame as an image

If you don’t want a custom navigation component and don’t want your logo displayed in every app by default, you can also add a logo to an app’s header frame on an individual basis. Simply drag an Image component into the header frame, size and place it as you like, and it’ll appear on a persistent header in that app.

Did this page help you?