--- title: "Page Navigation Control" slug: "page-navigation-control" updated: 2025-12-19T23:01:27Z published: 2025-12-19T23:01:27Z canonical: "docs.processmaker.com/page-navigation-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Page Navigation Control The Page Navigation control adds a button from which the Request participant can go to another page in a multi-page [Screen](/v1/docs/screens). See a [design example](/v1/docs/example-page-navigation-control-to-design-a-multi-page-screen). > This control is only available for Form-type Screens. See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a Page Navigation control. [Embedded content](https://app.supademo.com/embed/wcGiMLOV1lpoKGgRwC7ES) For a documented example of using this control, see [Page Navigation Control to Design a Multi-Page Screen](/v1/docs/example-page-navigation-control-to-design-a-multi-page-screen). --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the [Screen](/v1/docs/screens): 1. [Create a new Form-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Navigation** category, and then locate the **Page Navigation** icon![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/8e4a7207-b6d4-4aab-bf7e-f2f94ab85906.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/738136cc-f225-4147-98d1-7517e6e1bc3a.png) 4. Configure the Page Navigation control. See [Settings](/v1/docs/page-navigation-control#inspector-settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). Below is a Page Navigation control using the "Secondary" Variant option. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7129b1c6-0a8f-4171-bb12-52c8c944a651.png) For a documented example of using this control, see [Page Navigation Control to Design a Multi-Page Screen](/v1/docs/example-page-navigation-control-to-design-a-multi-page-screen). --- ## Settings The Page Navigation control has the following configurable settings in the Properties Panel: - [**Variable** panel](/v1/docs/page-navigation-control#variable-panel-settings) - [**Configuration** panel](/v1/docs/page-navigation-control#configuration-panel-settings) - [**Design** panel](/v1/docs/page-navigation-control#design-panel-settings) - [**Advanced** panel](/v1/docs/page-navigation-control#advanced-panel-settings) - [**Accessibility** panel](/v1/docs/page-navigation-control#accessibility-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Button Label Enter the text label that displays for this control. **Page Navigation** is the default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/aa0656b0-e09a-4868-b158-cea0e6c53a67.png) --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### Destination Screen[](/docs/page-navigation-control#destination-screen) Select the destination page to which to navigate in a multi-page [Screen](/v1/docs/screens). Current pages in the multi-page Screen display. If the Screen contains only one page, the **Destination Screen** setting displays **No Data Available** when selected. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/16689eb1-1e7b-414b-a8b8-ffb9e8239ccf.png) --- ### Design Panel Settings Expand the **Design** panel from the Properties Panel on the right to configure the following properties: #### Button Variant Style Select the style for the Page Navigation control. The style changes the control's appearance but otherwise has no functional difference. Select from the following options: - **Primary:** Blue-colored background with white-colored **Button Label** text. This is the default option. - **Secondary:** Gray-colored background with white-colored **Button Label** text. - **Success:** Green-colored background with white-colored **Button Label** text. - **Danger:** Red-colored background with white-colored **Button Label** text. - **Warning:** Yellow-colored background with black-colored **Button Label** text. - **Info:** Teal-colored background with white-colored **Button Label** text. - **Light:** White-colored background with black-colored **Button Label** text. - **Dark:** Black-colored background with white-colored **Button Label** text. - **Link:** White-colored background with blue-colored **Button Label** text. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/f4d2d55b-e664-4c38-b771-ab14a72e74e6.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule[](/docs/page-navigation-control#visibility-rule) Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/1eda1853-0608-455b-a056-72b119a2565c.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/c6fff429-d9f3-4b39-b7f8-97463b3421fc.png) #### CSS Selector Name[](/docs/page-navigation-control#css-selector-name) Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/dfa7627b-2030-48a8-898b-ea2ac34552af.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) --- ### Accessibility Panel Settings The **Accessibility** panel centralizes settings that enhance screen-reader compatibility and overall usability. ARIA Label setting persists through import, copy/paste, versioning, and upgrades, supporting a more inclusive and standards-aligned Screen Builder experience. #### Aria Label[](/docs/page-navigation-control#aria-label) Enter the string that provides a text alternative to this control for the following purposes: - Assistive technology, such as screen readers, read the **Aria Label** setting value. - This control has a visual indication of its purpose, such as a control that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication. The **Aria Label** setting value replaces the [**Label** setting](/v1/docs/file-upload-control#label) value. For example, if a control has both a **Label** setting value and an **Aria Label** setting value, assistive technology only uses the **Aria Label** setting value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/1adfe5e5-5342-4a47-bdb0-1523c72dccd3.png) #### Tab Order[](/docs/page-navigation-control#tab-order) Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation. [See best practices for setting the tab order for a Screen's controls](/v1/docs/screen-design-best-practices#tab-order-for-keyboard-navigation). Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/265b1b5e-648d-4f94-9e35-94a31611c350.png)