Home

Panel

UsageDevelopment

About

A Panel can be used for creating an app’s or website’s navigation. Since users will search for navigation on the left side of their screen, a Panel should always be sticked to the left side. Currently, we offer a Panel to create navigation, only.

Anatomy

A Panel can be composed of a header, body and footer. A body is always mandatory. A header is mandatory in Panels that can be semi-collapsed or hidden. A footer is always optional.

  1. Header: this is the upper part of the Panel and allows for a logo and/or an icon.
  2. Body: this is the middle slot of the Panel that allows for navigation items, as well as headers if needed.
  3. Footer: this is the bottom slot of the Panel.
Anatomy of Panel component

Elements

The body of a Panel contains the most crucial elements for users to navigate. Most important are the main navigation items and nested navigation items. Additionally, you can add section headers in order to group navigation items.

Navigation items may consist of a label and optionally a leading icon, an angle down (or up) and divider. If you use a navigation item with a angle down, this means you will combine those with nested navigation items. These items are aligned a bit more to the right, but have similar states. For now, we only allow for one extra navigation level.

Elements of panel component

When to use

A Panel should be used for an app or website’s main navigation.

When not to use

  • When you’re not designing the main navigation.

Placement

A Panel should be sticked to the left side of the screen, since that’s the main pattern users are used to.

Placement of panel component

Variants

  1. Visible (panel) - Always there, cannot be hidden.
  2. Drawer (panel) - By default open, but can be semi-collapsed.
  3. Modal (panel) - By default closed, can be opened by user-trigger.

Visible

The Panel is visible at all times and cannot be semi-collapsed or fully hidden. Therefore, the Panel does not provide a close or arrow icon.

Visible all times panel component

Drawer

The Panel is visible by default, but allows users to change to a minimised version of the navigation (semi-collapsed) in which just the icons of the main navigation items are visible.

Some rules:

  • A drawer Panel only shows the icons of the main navigation items;
  • Therefore, ony main navigation items with icons in the leading slot can appear in a drawer Panel;
  • When a drawer Panel is open, the Panel should push the main content of the screen to the right. When semi-collapsed, this main content will be pushed back left again. It will never overlap any content.
Drawer variant Drawer collapsed panel component

Modal

The Panel is hidden by default, but users can open the Panel by clicking/tapping an icon to trigger it. Often a hamburger icon at the top left in the UI.

Some rules:

  • The modal Panel overlays the main content, and does not push content to the right;
  • When users click somewhere outside of the modal Panel or click/tap the trigger icon, the modal Panel is hidden again;
  • Using this behaviour for a Panel is recommended if the width of a device is less than 600px, for example on mobile. For desktop we would recommend the two other variants.
Modal variant

Behaviour

Drawer behaviour visualization

When the drawer Panel is semi-collapsed and contains a nested item; clicking on the parent navigation item does expand the Panel and shows the nested items of that parent item.

Drawer behaviour visualization

When users select a nested item while the drawer Panel is open and then semi collapse the drawer Panel again, the parent item will remain having an activated state.

Drwaer behaviour visualization nested item

Scroll behaviour

Panels can be scrolled vertically, independent of the rest of the screen’s content and UI. If the list of navigation items exceeds the height of the visible Panel, its content can be scrolled.

  • In case there’s content in the header area of the Panel (a logo, an icon), the header area will behave sticky;
  • In case the footer will be used for important actions or information, it’s recommend to make this sticky for larger devices. When it comes to smaller devices, like mobile, the footer can be a part of the scrollable content to save space.

Content

Suggested content for panel component
Do write consistent labels with similar structures.
Do
Not suggested content for panel component
Don’t write inconsistent labels with difference wording/sentence structures.
Don’t

Nesting components

A Panel can use:

  • Nav item
  • Icon
  • Logo
  • Header
  • Button
  • Text

A Panel can be used in:

  • Navigation pattern (not yet released)

Resources