Skip to main content

Build navigational menus

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

Use navigation components to help users quickly find the information they need. You can build dropdown menus, step-by-step flows, and tabbed navigation interfaces. You can also create interfaces to paginate through content and data.

Use the Navigation component to build dropdown menus for your apps. Menu items perform specified actions when clicked, such as triggering queries, opening other Retool apps or web pages, or copying values to the clipboard.

Dropdown navigation menu

The Navigation component can display a logo which can also perform an action when clicked.

Configure menu items​

Use the Menu section to configure menu items. You can click on a menu item to configure it using the Edit menu details settings.

Drag and drop menu items to reorder them, or click + to create menu items. Click ••• to the right of a menu item to delete it.

Configure nested menu items​

note

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

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.

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.

Vertical orientation​

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

Mobile 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.

Perform actions on click​

You 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.

Reuse dropdown menus across multiple apps​

You can reuse the same dropdown menu across other apps by saving it as a module. This allows you to create a consistent navigation experience for your organization's apps without recreating it and maintaining multiple copies.

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. A menu item configured to open the current app is highlighted by default.

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 to the canvas 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.

Stepped navigation​

note

Use the Wizard component if you need to create step-by-step flows that can branch into different paths.

Use the Steps component to create a linear step-by-step flow. You can configure their options manually or dynamically using the option list and configure them with event handlers.

Edit steps

You can also link a Steps component to a Container with multiple views to create a Stepped Container.

Tabbed navigation​

Use the Tabs component to create a set of tabbed options in your app. You can configure their options manually or dynamically using the option list and configure them with event handlers.

Tab options

You can also link a Tabs component to a Container with multiple views to create a Tabbed Container.

Paginated navigation​

tip

The Table component automatically paginates tabulated data and has built-in support for server side pagination.

Pagination allows you to present large amounts of data in a more manageable way for your users. Retool's Pagination component presents a sequential set of numbered links to navigate through pages of data. This enables you to paginate almost any kind of information.

The Pagination component uses a default page and range, along with event handlers to perform actions when a page is clicked. The component adjusts the number of pages shown to fit its width and automatically updates as the selected page value increases.

Pagination example​

The following example uses the List View to display a custom-built list view of users with the Avatar component. The list displays information about three users at a time and uses the Pagination component to navigate.

The getUsers query retrieves a list of user information:

getUsers
select
  id,
  email,
  CONCAT(first_name, ' ' ,last_name) AS name
from users
order by id asc

The Pagination component’s Page count is set to {{ (Math.ceil((getUsers.data.id.length)/3)) }}. This calculates how many pages there are and rounds up if the last page contains less than three users.

The Avatar component uses the Pagination component's selected value, pagination1.value, when specifying the index to reference.

Fallback text:

{{ getUsers.data.name[i+((pagination1.value - 1) * listView1.instances)] }}

Label:

{{ getUsers.data.name[i+((pagination1.value - 1) * listView1.instances)] }}

Caption:

{{ getUsers.data.email[i+((pagination1.value - 1) * listView1.instances)] }}

Indexes are zero-based. Since the Pagination component starting value is 1, pagination1.value - 1 accounts for the difference.

Finally, this number is multiplied by the number of instances (rows) that the List View component is configured to display (3). As a result, the list displays the first three users on page 1, the next three users on page 2, and so on.

Configuring the Avatar component