Skip to main content

Getting started with navigation components

Learn how to build interfaces for users to navigate within apps.

Use navigation components to help users quickly find the information they need and move between pages and apps. The following components are helpful:

  • Navigation: A primary menu to help users quickly move between pages and apps. The Navigation component is automatically included in headers and sidebars when adding using multiple pages.
  • Breadcrumbs: A hierarchical list of links to help users trace their path through an app.
Demo

Features​

Key features of navigation components include:

  • Automatic configuration of Navigation when there are multiple pages.
  • Manual or mapped menu items.
  • Event handlers that navigate users to another app, page, or URL.
  • Optional icons for each menu item.
  • Customizeable style, including horizontal or vertical orientation for Navigation.

Alternative navigation options​

Retool provides a few other types of components that you can also use to help users navigate through steps or flows on a single page. These components are covered by other guides:

Specify content options​

The Content section of the Inspector contains settings that control the content of the navigation components, such as:

  • Mode, which controls whether the Navigation uses Manual or Mapped data
  • Menu items or Breadcrumbs, which define the items in the navigation components.
  • Add-ons, which enable you to add and configure a logo and tooltips.

You define the options for these components manually or dynamically by mapping to an array of data. Refer to the Define option lists guide for more information.

Use Navigation with multiple pages​

When you use a Navigation component in a an app with multiple pages, the menu items automatically populate. The Data source defaults to {{ retoolContext.pages }}, and item Label defaults to the page's title, if available.

New headers and sidebars are also automatically populated with a pre-configured Navigation component.

Manually configure menu items​

You can manually configure navigation options in the Menu items or Breadcrumbs section to configure menu items. Click on a menu item to configure it using the Edit menu item settings. Set the Type to identify the destination of each menu item.

For Navigation, you can configure menu items to appear highlighted using the Highlight boolean setting. This is useful to visually highlight a menu item for the current page or app.

Add dropdown menu items​

In Navigation components, you can group menu items together as nested dropdown menus. Each parent menu item contains child menu items (submenu items) that appear within the dropdown menu. Dropdown menu items support one level of nesting—child menu items cannot also be parent menu items.

Parent menu items cannot be configured to trigger actions on click. This event is used to expand or collapse the menu.

Dropdown navigation menu

To nest a menu item, drag it below and to the right of the menu item you want to nest it under. A blue line appears as you drag menu items around and indents to the right when nesting.

Parent menu items include a count of all nested items.

Configure user interaction​

The Interaction section of the Inspector enables you to set event handlers, which listen for and handle interactions with your components.

Perform actions on click​

Event handlers for Breadcrumbs with a Type of App or Custom are automatically defined. Breadcrumbs must be a Custom type if you want to create your own event handlers.

Configure menu items to perform specific actions when clicked. You can create menus that export data, link to other apps or URLs, copy content to the clipboard, or run queries.

When configuring menu items to Open another Retool Page, you can optionally include URL query and hash parameters to pass data to, or configure certain characteristics of, other apps.

You can also configure event handlers to trigger when you click the logo. Select the logo in the Navigation component, and click + to add an event handler

Add a logout button​

To allow users to log out of Retool directly from your app, you can add a logout button.

Add a Button or Icon component and attach a Click event handler to it. Set the Action to Go to URL, and in the URL field, append /logout to your organization's base URL. After they click the button, users are sent to your organization's login page.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

Orientation​

The Navigation component defaults to horizontal orientation, but it also supports vertical orientation to display a navigation menu alongside content, such as within the Sidebar frame.

Mobile layout navigation​

If you configure your app with a mobile layout, Retool can automatically configure a slide-in Navigation menu using the Sidebar frame. When viewed on mobile, the Header frame contains a menu button to show or hide the menu.