Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Local Navigation helps users move within a specific product area or workflow. It complements Global Navigation by enabling navigation that is being context-specific, task-oriented, and adaptive to the current dashboard or process step. While Global Navigation connects users to system-level destinations and cross-product areas, Local Navigation supports the “work inside the page”—helping users understand where they are in a flow, jump It supports orientation in flows, navigation between related sections, and move forward or backward /back movement without losing context.

Local Navigation is intentionally dynamic and flexible. It does not and doesn’t need to exist everywhere in Edge.One. Simple applications might may not require it at all. Local Navigation is introduced as soon as dashboards develop dependencies between each other—such as . It becomes relevant when dashboards have dependencies (for example, favorites, nodes, and or multi-dashboard processes). Because it is limited to the current dashboard context, Local Navigation it can vary between dashboards and should reflect match the local structure and needs of that area rather than forcing a one-size-fits-all approachthe area.

Anatomy

Local Navigation is composed of a set of reusable navigation surfaces that appear within a dashboard to help users move through related content and workflows. These elements are chosen based . The set of surfaces depends on the complexity of the application area: some dashboards only need lightweight navigation (for example, breadcrumbs or in-content links), while others benefit from a persistent structure such as a Navigation Boardlet. The following sections describe the key components and how they work together to Together, these surfaces should support both vertical navigation (drilldowns) and horizontal , navigation (step-based flows).

Navigation Boardlet

...

The Navigation Boardlet is an expandable and collapsible navigation element placed . It sits on the far left of the dashboard , spanning and spans from top to bottom of the page. It provides a collection of tools and links to different aspects of the current application area, usually links and tools for navigating within the current product area, typically presented as a list or a tree list.

Navigation items are commonly organized into groups usually grouped to improve scanning and to align with reflect the information architecture. Each group should have a clear heading and a distinct icon so users can quickly understand what belongs together.

The boardlet can include dynamic elements that update to reflect the current stage of the application or the user’s context based on context. For example, counters to the right of links can indicate the number of items in a library behind that link. When a boardlet contains many items, it should support independent scrolling so the dashboard content remains usable.

By combining hierarchical structures with direct links, the Navigation Boardlet supports both horizontal navigation (moving between peer areas or steps) and vertical navigation (drilling down into deeper levels of detail).

...

Breadcrumbs show users their current location relative to the information architecture. They enable users to quickly move up to a parent level or return to a previous step.

Breadcrumbs are always located in the left part of the header. Breadcrumbs support vertical navigation inside drilldowns and adjust based on the user’s current position in the structure. All page items in the breadcrumb component are interactive and link to the corresponding pages. The go-back icon moves back one step at a time within the page structure.

They support vertical navigation inside drilldowns and adjust based on the user’s current position in the structure.

Navigation Actions inside the Content

Navigation actions are navigation elements placed inside the dashboard content. They enable allow users to move through workflows and drilldowns continue a task directly from where they are working, rather than instead of relying only on side navigation structures. These actions are most useful when navigation is a consequence of an interaction, such as opening details, progressing through steps, or confirming a decision.

Common placements include:

  • Buttons in toolbarsLinks and buttons within dashboard content
  • Actions inside tables
  • Actions from dialogs

...

Table navigation is commonly provided as part of row actions, usually placed in the last column. It typically routes users to a drilldown page (for example, a details view), representing vertical navigation to the next layer in the breadcrumb structure. The destination screen should provide a clear “back” “Back” option to return to the prior context.

...

For more information, please go to the Wizard pattern.

Dialogs

Dialog navigation is usually implemented through footer bar actions. It typically includes two directions:

...