Overview

The backbone of our app ensures a consistent and responsive experience across the product.

Our Application Frame is composed of four consistent regions, each one with a specific purpose:

1. TopNav
2. MainNav
3. SecondaryNav
4. Main

The TopNav, MainNav, and SecondaryNav may vary or be hidden in some areas of the product. The Main region, however, is always present and contains most of the complexity.

Regions

TopNav

Location

The TopNav is always fixed at the top of the screen. Even when the user scrolls, it remains in place, providing easy access to the elements it holds.

Anatomy

TopNav fills all the available horizontal space until it reaches certain limits. It adapts to viewport changes, dividing the space into three areas that behave differently depending on their location:

• Content on the left side sticks to the left.
• Content in the center remains centered.
• Content on the right sticks to the right.

Has a fixed 72px height.

Content

The TopNav contains actions that affect the main content in the current context. Possible elements that can be found on the TopNav include:

• Navigation
• Page heading
• Key actions for the context

MainNav

Location

The MainNav is always fixed on the left side of the screen and remains visible throughout most of our product experience, except on the Report page and the Runner.

Anatomy

MainNav takes up all available vertical space until it reaches the viewport's limits. It adapts to changes in the viewport, dividing the space into two sections that behave differently depending on their position:

• Content at the top stays fixed at the top
• Content at the bottom stays fixed at the bottom

It comes in two forms, collapsed and expanded, based on user input. When expanded, it overlaps the content instead of pushing it aside. These are the default width values for each version:

Content

The MainNav contains actions that affect the entire product navigation. Possible elements that can be found there include:

• Team selector
• Settings
• Product navigation

SecondaryNav

Location

Fixed on the left side. Helps to navigate through the Main region.

Anatomy

The SecondaryNav occupies all available vertical space until it reaches certain limits. It adapts to changes in the viewport, dividing the space into two sections that behave differently depending on their position:

• Content at the top remains fixed at the top. The content should be arranged from top to bottom.
• Content at the bottom stays fixed at the bottom. This is optional and is sometimes used for specific actions related to the navigation.

It comes in two forms: collapsed and expanded. This is based on user input and the viewport breakpoint. When expanded based on user input, it overlaps the content underneath. These are the default width values based on the breakpoint:

Content

The SecondaryNav's primary purpose is to help users navigate the content displayed in the Main region. It typically displays a list of items for users to explore.

Behaviour

How the SecondaryNav adapts to different breakpoints

Main

Location

Takes up the majority of the screen area, if not all, and is always visible since it's where the product is experienced.

Anatomy

It occupies the space left by the other regions adapting to the viewport changes. The content inside is displayed in two ways: free and with limits.

Content

Main region holds the product experience and the content is very diverse.

Behavior

How the main area adapts to different breakpoints at the limited version.

Frame variants

Regions combined create three distinct frame variants available at Maze.

Frame 1

Contains TopNav, MainNav and Main. Project page, dashboard and home use this frame.

Frame 2

Contains TopNav, SecondaryNav and Main. Report page uses this frame.

Frame 3

Contains TopNav, MainNav, SecondaryNav and Main. Builder, Reach and Results use this frame.

---

Quality checklist

This element passes the following requirements described in our Component lifecycle.