(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dashboard Navigation

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11746-27071&t=iosNC2AkSTGs5lMh-1

Overview

• The component provides a visual interface for switching between dashboards.
• It supports horizontal or vertical navigation layouts.
• The current dashboard is highlighted to guide users.
• Users can move between dashboards without returning to the library.

...

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "analyticsDashboardsAccess" restricts the dashboard navigation to users with specific analytics permissions, allowing for role-based control of navigation access.

Guidelines

General Guidelines

• Local navigation is only needed when dashboards require elements such as nodes, dependencies, favorites, or subdashboards. Simple applications do not require it:contentReference[oaicite:0]{index=0}.
• The dashboard navigation boardlet must always remain the same in form and appearance within a breakpoint; it may not be changed:contentReference[oaicite:1]{index=1}.
• Local navigation always controls only the current dashboard and can vary from dashboard to dashboard:contentReference[oaicite:2]{index=2}.
• Local navigation tasks include navigating between dashboard nodes, filtering dependencies, and accessing subdashboards:contentReference[oaicite:3]{index=3}.

Usage

• Use the component to switch between a defined set of dashboards; specify the list and order via dashboards so users can move between views without returning to the library.
• Match the navigation orientation to the available space by setting direction to "horizontal" for row-based navigation or "vertical" for column-based navigation.
• If onboarding is needed, make the control discoverable by enabling the hotspot and supplying localized helper copy with enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Sizing & Layout

• Choose direction: "horizontal" when there are few items and scanning should be left-to-right; choose "vertical" when items are numerous or labels are longer.
• Add outer breathing room using paddingClass to prevent the control from touching adjacent UI.

Visibility & Authorization

• Gate visibility for roles or policy sets with visibilityPolicySetId to avoid exposing navigation to users who shouldn’t access those dashboards.
• Use displayConditions to hide the navigation in steps of a flow where it should not be available.

Paired Do & Don’t

Accessibility

• Announce the current location clearly through unambiguous dashboards[].name labels so the built-in highlight is understandable in both orientations.

...

• Avoid color-only meaning by ensuring each destination has a distinct, descriptive label in dashboards[].name.
• Present the control only when actionable by configuring visibilityPolicySetId and displayConditions.