# Steps & Navigation

***

### Quick Access <a href="#id-2-quick-access" id="id-2-quick-access"></a>

* [Top Bar](#navigation-top-bar)
* [Navigator Menu](#navigator-menu)

***

### **Top Bar**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FyMv76WLBmlHSNM7y1IJx%2Fimage.png?alt=media&#x26;token=637cc84e-a46f-4113-a8cb-67590bcf5cb1" alt=""><figcaption><p>Top Bar</p></figcaption></figure>

This toolbar allows you to add, remove, and navigate through the hints of your group efficiently, offering tools to interact directly with individual hints of a group.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FEZ8tYiqB6VJe1FIrevg6%2Fimage.png?alt=media&#x26;token=e8264541-97cb-43d7-8276-df2c17fcb147" alt=""><figcaption><p>Top Bar (Navigate through steps)</p></figcaption></figure>

* **Current Hint Indicator (A)**: Displays the currently active step highlighted in blue, here a simple icon, making it clear where you are in the hint group.
* **Step Editing Controls**:
  * **Add Button (B)**: Enables the addition of new steps directly after the current one, facilitating the expansion of your hint group without needing to navigate back to the main menu.
  * **Preview and Delete Button (C)**: Hovering a step allows you to preview and delete it.

Here's an overview of the [different types of hints](https://help.usejimo.com/docs/experiences/hints/components) you can add to enhance user interaction and guide users through your digital environment effectively.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fi7Ehs4D78TGIG46lpzBb%2Fimage.png?alt=media&#x26;token=3d12296e-14c1-4bed-82c1-f9edc5c0fb69" alt=""><figcaption><p>Hints types</p></figcaption></figure>

### Group Management

**Adding multiple hints to a group:** You can add multiple hints to your experience, allowing you to apply the same targeting parameters to the whole group. (Unlike the Tours & Surveys the order doesn't matter.)

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FyMv76WLBmlHSNM7y1IJx%2Fimage.png?alt=media&#x26;token=637cc84e-a46f-4113-a8cb-67590bcf5cb1" alt=""><figcaption><p>Top Bar</p></figcaption></figure>

**Drag-and-Drop Reordering**: The interface allows you to simply grab a hint and move it to a new position within the sequence.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FLmlyZVr6XAQ3Z37RnDZK%2FTMComponentsReoorganize.png?alt=media&#x26;token=308094a8-735e-4f21-b467-420758d8b0fe" alt=""><figcaption><p>Reorder steps</p></figcaption></figure>

***

***

### Navigator Menu

The Navigator within Jimo's Builder is a powerful tool designed to streamline the creation and organization of elements in a hint.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F2FLbZgXVl2t7aQx5bNww%2Fimage.png?alt=media&#x26;token=ea7c182d-6464-4bff-bc28-334ac6acc7ca" alt=""><figcaption><p>Hint  Full Navigator</p></figcaption></figure>

&#x20;It functions as a centralized interface for managing and navigating between different components of a step and adjusting their specific parameters.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FjufLk26kKFTG2SRyCgF1%2FTMbuilderNavmenu.png?alt=media&#x26;token=3ec9aea3-842d-4038-8574-048e895d0465" alt=""><figcaption><p>Navigator elements</p></figcaption></figure>

* **A (Main or Parent Element)**: This is the central control for the step. It provides access to settings that determine how the step behaves and is positioned on the page. Here, you can adjust progression behaviors, like how a user moves to the next step, and how the step is visually placed.
* **B (Components of the Current Step)**: This section lists all active components within the step, such as text, images, or call-to-action buttons. It's designed for quick editing and the addition of new elements, allowing for real-time customization of step content.
* **C (Special Elements)**: Located below the main components, this area is for adding and configuring unique elements like hotspots, which focus user attention on particular aspects of the page. These elements include specialized settings for enhanced interaction.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F8j7vZQP10cNdMyrW3g6q%2FTMbuilderNavClick.png?alt=media&#x26;token=0a9760d3-2de4-459f-adb1-def410532959" alt=""><figcaption><p>Access element parameters</p></figcaption></figure>

In the Jimo Builder interface, managing element-specific parameters is made straightforward:

* **Navigator Selection**: You can select an element directly from the Navigator menu. When selected, the element is highlighted in a blue box (A), indicating it's ready for parameter adjustments.
* **Preview Interaction**: Alternatively, clicking an element in the live preview pane automatically highlights and selects it in the Navigator. This feature allows for immediate access to the element's settings, facilitating quick edits.
