Navigation drawer

Description

The navigation drawer is visible on every workspace. It allows users to navigate between different workspaces. It can be displayed in the expanded or collapsed state.

The expanded navigation drawer contains the names and icons that represent the workspaces. In addition, there is a left arrow icon on the top of the drawer.

The collapsed navigation drawer contains just the icons that represent the workplaces. In addition, there is hamburger button on the top of the drawer.

Navigation drawer can also contain docked workspaces, located below a separator from default workspace navigation.

Prototype

When to use

The navigator should be active on all workspaces, except when a dialog is open.

Interactions

To navigate to a workspace, click on the workspace name or icon. The icon for the selected workspace is highlighted in the accent color.

To expand a collapsed drawer, click the hamburger icon.

To collapse an expanded drawer, click the left arrow icon.

Specifications

Additional reference

Navigation drawer - Material Design