Skip to main content

Navigation

Using consistent navigation patterns and a logical information structure provides a predictable way for users to navigate and interact with your app.

Your app's content can be structured and nested in multiple ways, resulting in different navigation hierarchies. Depending on your app's navigation hierarchy, you should consider different patterns and components to ensure an enjoyable and satisfying user experience.

Flat hierarchy​

A flat navigation hierarchy implies that the content structure of an app has no hierarchy, and you can consume the app in any order.

Flat hierarchy

What does this mean for your app:

  • Your app's content pages need to be differentiated clearly.
  • Your app needs to have 6 - 8 pages or less.

The above points are essential to ensure users view the app's pages in the correct order and understand the purpose of each page.

Nested hierarchy​

A nested navigation hierarchy implies that the content structure of an app has a hierarchy, and you have to consume it in a specific order.

Nested hierarchy

What does this mean for your app:

  • You need to ensure that users know the location of a page within the hierarchy at all times.

Since pages are organized in a tree-like structure and may be deeply nested, users need all the help they can get to orient themselves. Also, this will be beneficial when users share links with others who have yet to learn where they're currently in your app.

Combined hierarchy​

Complex apps may have a content structure that combines flat and nested navigation hierarchies.

Combined hierarchy

What does this mean for your app:

  • You need to follow the recommendations for nested and flat navigation hierarchies.

Primary navigation​

Primary navigation refers to your app's main navigational entry points, from which users can move deeper into the app hierarchy.

Primary navigation

Secondary navigation​

Secondary navigation refers to navigational elements that lead to pages branching off your app's main entry points. Those pages are hierarchically subordinate to the main entry points of your app.

Secondary navigation

App home​

When users open your app, their first interaction will be on the home page. That's why it's essential that this page communicates your app's purpose and provides users with immediate value.

Our navigation components help you create a consistent and satisfying navigation experience.

App header​

The app header may include a horizontal set of tabs to accommodate primary navigation in your app, from which the users can move deeper into the app hierarchy. Additionally, the app header will display your app's title, which allows the users to get back to your app's home page.

App header

Use the app header as primary navigation when you have a flat navigation hierarchy with only a few main navigational entry points.

To learn more, visit the app header component documentation.

Breadcrumbs are a horizontal list of links that show the path to the users’ current location within the navigation hierarchy. They play a vital role in the users’ ability to orient themselves within your app.

Breadcrumbs

Use breadcrumbs when you have a deeply nested navigation hierarchy and want to show the users’ path to the current location.

To learn more, visit the breadcrumbs component documentation.

Tabs​

Tabs group related content into multiple sections.

Tabs

Use tabs when you want users to be able to switch between different groups of related content quickly.

To learn more, visit the tabs component documentation.

Menus display a list of links (or actions) from which users can choose.

Menu

Use the menu to group related navigational elements or to progressively reveal more options to the user. This grouping will help to keep your user interface clean and prevents users from being overwhelmed with too many options.

To learn more, visit the menu component documentation.

Links allow users to navigate between different pages or sections of your app and, thus, play the most vital role in providing navigation.

Links

Use links to allow users to navigate your app. The rule of thumb is: Whenever the URL of your app changes, use a link. Although it's tempting, don't use buttons for navigation. For accessibility reasons, users should always be able to identify links (see: WCAG 2.1, providing additional visual cues for links.

To learn more, visit the link component documentation.

Still have questions?
Find answers in the Dynatrace Community