Navigation

Build interfaces for users to navigate your apps and data.

Use Retool's collection of 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.

Dropdown menus

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 menuDropdown navigation menu

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

Configure menu items

Use the Menu section of the Inspect tab 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 + Add new to create new menu items. Click โ€ขโ€ขโ€ข to the right of a menu item to delete it.

Drag menu items into positionDrag menu items into position

Configure nested menu items

๐Ÿ“˜

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 will indent to the right when nesting.

Parent menu items include a count of all nested items.

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.

Highlighting the current menu itemHighlighting the current menu item

Stepped navigation

๐Ÿ“˜

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 stepsEdit 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 optionsTab options

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

Paginated navigation

๐Ÿ‘

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 from the onboarding_db resource:

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 componentConfiguring the Avatar component