Description

The side navigation provides local navigation to all module tools/apps available to users. It also enables them to open multiple applications simultaneously to create a seamless and non-disruptive workflow.

Together with the shell bar, the side navigation makes up a key part of the applicationshell and is foundational to the modules framework. But unlike the shell bar, the side nav can be expanded, minimized, or hidden from view.

Anatomy

Image

The side navigation is organized into three distinct sections:

1. Home and Browse

The first section of the side navigation contains the home button and the file repository.

2. Module Tools

The module applications section contains all the different applications the user has access to.

3. . Admin Utilities

The utility section contains connections, security settings and the button to the about page. More options are available for administrators.

The first two sections are separated by a border line, while the last section is anchored to the bottom.

Behavior & Interactions

Expand and collapse

By default, the side navigation appears collapsed into a vertical bar taking up the full height of the browser screen. This enables the side navigation to be present without taking up too much screen real estate. But its collapsed size means its only big enough to represent module tools as icons only.

Click on the menu button at the very top to enter and exit expanded mode. The expanded mode shows both icons and the text labels for each item, so its easier for users to find what they are looking for.

In some instances, such as when an application page enters a full-screen mode, the side navigation can be hidden from view altogether. For example, the full-screen mode in the module in . In such scenarios, the side navigation remains hidden until the user exits full-screen mode.

2
do
false
Alternate between expand and collapsed modes to enable labels and titles.
dont
false
Permanently hide the side navigation from view unless in a temporary state, such as full screen mode.

Responsive and overflow

The side nav is built to be fully responsive. As the browser screen is reduced in size, the side nav places module apps under an overflow menu and in a popover. The home / files section, and admin utilities never go into overflow.

Other notable behaviors associated with overflow depend on whether the side nav is collapsed or expanded:

Image

Selection States

The side navigation enable users the flexibility to explore multiple apps at the same time. Different visual cues help the user understand which apps are selected, disabled or currently in session.

Image
1
11.04; 35.66
Default state for all tiles in the side nav. When in regular state, the app is neither open nor active.
2
20.83; 35.06
State change on mouse-over
3
41.88; 34.86
The app is currently open and active on screen
4
62.20; 34.46
The app is currently open in the background, but not active on screen
5
83.46; 35.26
Dotted border used for keyboard tabbing behavior for accesibility

Because more than one module app can be open at once, the side nav has two different open states: open / active, and open / inactive. This helps the user see all apps currently open at a quick glance.

For example: below, the user is in the product homepage and opens one of the module apps listed in the side navigation. Then, the user navigates back to the homepage without closing the app.

Image
guideline
The same selection pattern and states also apply to the all items inside submenus or overflows menus.

Open in new browser tab

The side navigation area allows users to switch to different module applications. Right-clicking on a module application allows the user to open it in a new tab or a new window. As each module has its own URL, if multiple modules are open, copying and pasting the URL only opens the active module.