Skip to main content

Navigation
ready

Navigation patterns are crucial for ensuring users can seamlessly move through an application. In Grafana, two key components play a vital role in navigation: the Megamenu and the Breadcrumbs. Let's delve into how these components contribute to effective navigation patterns.

Megamenu navigation​

Overview:
The Grafana megamenu is the primary navigation component for all of Grafana, including core, plugins, and other apps. It exists in three states - opened, closed, and “docked” open. When open, the menu acts as an overlay. When docked, the page content responds to a narrowed viewport.

When to use:
The megamenu provides access to levels 1, 2, and 3 of the Grafana information architecture. Levels beyond this should be handled by tabs on a page (level 4) or inline elements using headings, steppers or other design elements (level 5 and up).

Usage guidelines​

To ensure users have a consistent and expected experience when they are navigating through Grafana, it is important to follow the following Dos and Don'ts.

Dos:

  • Utilize a landing page for all overview/category pages.
  • Ensure all entries have a corresponding page or place to go for consistent breadcrumb behavior.
  • Be sure to include an icon next to any level 1 content.
  • Ensure all megamenu entries are in sentence case.
  • Consider standardizing labels used across Grafana and using nouns over verbs for page titles.
  • Consider the number of pages you place in the megamenu.
  • Be careful with page title length to avoid truncation.
  • Strive for consistency within the Grafana ecosystem.

Don'ts:

  • Redirect within the megamenu to compensate for a lack of a landing page.
  • Do not use an icon any content that is not level 1.
  • Do not place cloud applications at level 1 of the megamenu.
  • Use title case.
  • Include external links.
  • Nest tabs to indicate levels 5 and up.

Grafana’s topnav breadcrumbs are a key part of the overall navigation experience. They are the very top most popular part of the 2022-2023 navigation redesign, and so it is critical to the user experience that they behave in a consistent and uniform manner.

When to use:
Breadcrumbs are automatically generated by the page hierarchy, so they are used on all pages.

Usage guidelines:​

Breadcrumbs provide users with a critical indicator of where they are within the product space. Having breadcrumbs behave consistently throughout the product, ensures that users have a good experience and are able to understand where they are regardless of what part of the product they are currently viewing. The following guidelines will ensure we are providing a consistent and expected experience.

Dos:

  • Utilize breadcrumbs for information architecture hierarchy.
  • Utilize a separate page for anything reflected as a breadcrumb.
  • Ensure all breadcrumb entries are in sentence case.
  • Strive for consistency within the Grafana ecosystem.
  • Be cautious with page title length to avoid truncation.

Don'ts:

  • Override breadcrumb behavior to be reflective of history.
  • Redirect breadcrumbs to compensate for a lack of a landing page.
  • Use title case.

Return to previous​

Because of Grafana’s technical and information architecture, it is a common experience for a user to work on an item in one area and then follow a link to see the results of their work, ending in a different area (such as SLO configuration that creates alert rules or cloud apps that create dashboards). Additionally, the more we weave cloud app experiences into core Grafana through extensions, the more we link our users from one branch of the information architecture “tree” to a very distant branch.

This causes a switch in context that requires a full understanding of Grafana’s information architecture to truly understand.

Because breadcrumbs are reserved for hierarchy rather than history, users are unable to utilize breadcrumbs to “go back.” Additionally, the browser “Back” button is only intermittently helpful - and many users have been trained to ignore the browser button in web applications.

“Return to pevious" is a helper component that restores the previous context for users encountering this situation.

When to use: Use "Return to previous" any time a link sends a user to a distant part of Grafana’s information architecture. Though the component was originally designed with cloud apps in mind, it is helpful across Grafana’s core product as well.

Usage guidelines:​

Use "Return to previous" to provide users with help navigating back to where they came from.

Developer-specific documentation is available on the Developer portal.