Create an App Navigation Bar

To create consistently branded apps, use a navigation bar that persists from page to page. You can do this by creating a Principal and Dependent pages. Add a Navigation component to the header portion of the principal page to redirect end users to different pages. Then, create those pages in the app as dependent pages to that principal page.

Jump to:

Using the Go to URL action

Each navigation bar item uses the Go to URL action to redirect to a specific route. To direct end users to a specific app and page, just enter the base and page URLs in the Go to URL action. A button redirecting users to the calendar page within the marketing app would use /marketing/calendar as its redirect URL.

Note:  Begin the redirect URL with a backslash (/), otherwise the value will be appended to the page URL as a whole. For example, a redirect URL of marketing/calendar from a marketing dashboard located at https://www.example.nintex.app/marketing sends users to https://www.example.nintex.app/marketing/marketing/calendar.

Once you set the redirect URL, Nintex Apps adds it to the end of Nintex Apps tenant's domain URL (such as https:///www.example.nintex.app/), sending users to the appropriate location at https:///www.example.nintex.app/marketing/calendar.

Absolute URLs

It's possible to use absolute URLs, with the full domain path included. For example, using https:///www.example.nintex.app/marketing/calendar as the redirect URL works just as well. However, if these app pages are used across multiple Nintex Apps tenants, their redirect URLs will only work in www.example.nintex.app; they will not work in the other tenants, because the absolute URL references only the www.example.nintex.app domain.

Creating Principal and Dependent pages for app navigation

Note:  This tutorial guides you through the creation of a 4-page app to see how app navigation works. The app consists of the following pages:
  • Dashboard: A marketing dashboard ( the home page)
  • Calendar: Calendar of marketing events and deadlines
  • Swag: List orders for marketing products
  • Data: Collections of collateral and customer data

The tutorial guides you create the necessary pages and you can choose which models and components to include. The focus of this example is app navigation.

  1. In Nintex Apps, go to Pages.

  2. Click Create and configure the new page.

    • Name: Give the page a logical name and indicate that it is a principal page. For example, marketing_master.

  3. Click Create.

  4. Click Save and next.

  5. In Page URL's page Add URL.Click Save and edit page.

  6. In the newly opened page's Properties panel turn on the Available as principal page.

  7. Drag and drop the Navigation component into the header area at the top of the canvas.

  8. Drag and drop a Page Region into the bottom of the canvas, below the navigation.

  9. Click Save and Preview.

  1. In Nintex Apps, go to Apps.

  2. Click Create and configure the new app. Nintex Apps generates the app's base URL slug: /marketing.

  3. Click Create.

Create dependent pages based on the principal page you created. One each for the Dashboard, Event Calendar, Product Ordering, and Customer Data pages.

Note:  Nintex Apps designates the first page you create as the Home page for the app, so start with the Dashboard.

  1. In the Nintex Apps, go to Apps.

  2. Click the app you created.

  3. Click Create and configure:

    • Name: Give the page a logical name, in this case, dashboard
    • Create as dependent page: Select this and choose the correct principal page (marketing_master) from the dropdown.

  4. Select Make home page.

  5. Click Add URL. Nintex Apps generates the app's Home page URL: https://example.nintex.app/marketing.

  6. Click Create.
    Complete the page by creating models and adding components to the page.

  7. Click Save.

Navigate back to the Apps list and create the remaining pages, using the following names and Page URL slugs:

  • Calendar: Calendar of marketing events and deadlines (slug: /calendar)
  • Swag: Orders for marketing products (slug: /swag)
  • Data: Collateral and customer data (slug: /data)

  1. Click Create.

    • Name: Give the page an appropriate name.

    • Create as dependent page: Select this and choose the correct principal page (marketing_master) from the dropdown.

  2. Nintex Apps generates the Page URL slug using the name. For the Calendar page, it's https://example.nintex.app/marketing/calendar .

    Note:  If required, you can modify the Page URL slug text.

  3. Click Create.
    Add models and components to each page.
  4. Click Save.

Note:  If you preview any of these pages, they will have the content you add and an empty navigation bar.

Note: 
  • The app has a base URL, in this case it is /marketing.This is also the URL of the application's Home page.
  • Each page has a Page URL slug, such as /calendar. This is appended to that Base URL to become the "address" of the page: /marketing/calendar .

In the principal page, edit the navigation bar. To create a Navigation item, click Add nav item.

  1. On the Navigation bar, go to the first Navigation item to set it's properties in the General tab:

    • Label: Home
    • Icon: Add an appropriate icon, if required.

  2. Click the Interactions tab.

  3. Click Go to URL action and configure to point to the URL for the app. This is also the Page URL slug for the app's home page.

    • Action Type: Go to URL
    • URL: /marketing . This is the app's Base URL.
    • Open URL in: Current window

  4. Click Save and Preview.

Assuming you set a marketing app with a base URL of /marketing, the Home navigation item should open the correct Nintex Apps page: the marketing dashboard.

Next, create the navigation items that point to the rest of the app's routes.

  1. Add three additional navigation items with the following labels:

    • Label: Calendar
    • Label: Product Orders
    • Label: Customer Data

Add icons if needed.

  1. Go to the Calendar navigation item, then click on the Interactions tab.

    • Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

      • Action Type: Go to URL
      • URL: /marketing/calendar
      Note: 

      This is the page's specific Page URL slug. It provides directions to the app (/marketing) as well as to the page within the app assigned to that Page URL (/calendar).

      • Open URL in: Current window

  2. Go to the Product Orders navigation item, then click on the Interactions tab.

  3. Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

    • Action Type: Go to URL
    • URL: /marketing/swag
    • Open URL in: Current window

  4. Go to the Customer Data navigation item, then click on the Interactions tab.

    • Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

      • Action Type: Go to URL
      • URL: /marketing/data
      • Open URL in: Current window

  5. Click Save.

Result

From the Apps page, click into the app and select apps home page (the Dashboard). Click Preview. Using the navigation bar, navigate among the four pages of the app. Because of this principal page's navigation header, each page within the app has a functional navigation bar which points to every other page—ensuring end users always have a way to maneuver through the app.