🚧

Retool-specific navigation has moved

While all of these changes are fully backwards compatible, Retool-specific navigation has moved from the top bar to the bottom left corner for editors and end users. Below, learn more about the expanded functionality and the motivation behind these changes.

A few months back, we introduced an opt-in, customizable Header frame in Retool, ideal for adding custom navigation to all of your Retool apps. As of on-premise version 2.95, this Header frame will be on by default for all users.

To accommodate this functionality, we’ve made some changes to how the app navigation bar and custom branding work.

What's changed?

Retool-specific navigation

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. Additionally, there was a toggle to switch between production and staging environments.

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 want editors to 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.

For your end users, we've moved all Retool-specific operations, like navigating apps, toggling between production and staging mode, and editing user settings, to a floating user menu in the bottom left of the screen.

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

📘

Editor Navbar

Users with Edit permissions will still see a black editor-only navbar when previewing the app, which allows them to switch between preview and edit mode in addition to other editor-specific actions. Users who only have viewer permissions will not see this.

Expanded options for custom branding

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.

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.