Quick Navigation

Introduction

The Quick Navigation page component is designed to provide a quick way to allow users to navigate to external apps and URLs in a page. This is also ideal for mobile menus, allowing users to place it anywhere on their page. The idea remains the same: to provide a card, list, or button to act as a way for users to quickly navigate to another menu page.

How does it work?

Designed with mobile users in mind, this allows mobile users to go to their desired page with a single tap. For example, the page component can be used for a Quick Menu to let users go to pages they frequently visit.

Here’s how you can use and configure it in Joget:

1. Access the Joget DX 9 Showcase UI to set up a testing environment for the Quick Navigation component.
   
2. Drag and drop a UI element into any category. For example, List.
3. Click the newly added UI element and click Edit Page Components.
   
4. Drag and drop the Quick Navigation page component from the component palette onto your page. Click the Quick Navigation component to modify the template configuration.
   
5. Click Done Editing Page Components.
6. Click Preview.
   

You can now quickly navigate to different menus. The Quick Navigation uses the same method to edit the template as the Information Tiles template, which you can view here.

Configure Quick Navigation 

To configure the Quick Navigation component properties, in UI Builder, drag and drop a UI element into any category to enable the Edit Page Components button, click on it, and drag and drop the Quick Navigation page component into the page for editing.

When adding the Quick Navigation component, you will see the following field available for configuration:

• ID: Set a custom ID for the Quick Navigation. This ID must be unique among the page components.
• Template:
  • Choose Template: Select a quick navigation template from a list of presets.
  • Edit Template: Displays the template HTML where you can customize it.
• Sample: Shows a preview of the selected template and the edit made.
• Layout:
  • Multi Column Grid: Allow to configure multiple navigation and arrange them in grid columns.
    • Grid Items: Configure the fields used by the Navigation Template.
    • Width: The max width of the Navigation Template.
    • Height: The max height of the Navigation Template.
    • Default Columns: Number of columns to display for desktop size.
    • Tablet Columns: Number of columns to display for tablet size. If Default, will follow the value of Default Columns.
    • Mobile Columns: Number of columns to display for mobile size. If Default, will follow the value of Tablet Columns.
    • Gutter: The gap between columns.
  • Single Navigation: Similar to Multi Column Grid, which is only able to configure and render 1 navigation.
    • Link Source:
      • UI Menu:
        • UI: Select the Joget App to navigate to quickly.
        • Select Menu: Select the menu from the selected app to navigate to.
      • Link URL;
        • Link URL: Enter a URL to redirect to.

The following properties become configurable depending on the template selected:

• • • Title
    • Icon
    • Header
    • Subtitle
    • Description
    • Image
    • Footer
    • Link Label
    • Color
    • Background Color
    • Position:
      • Right
      • Left
      • Top
      • Bottom
    • Width
    • Height

AJAX & Events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.

Download Sample App