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 at all times

  2. Visible by default

    • Able to be semi-collapsed
    • Able to be fully hidden

  3. Visible by user-trigger, only

Visible at all times

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

Visible by default, but able to be semi-collasped

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 semi-collapsed 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 semi-collasped Panel;
  • When a Panel can be semi-collapsed, it should show the arrow icon instead of the close icon;
  • When fully visible, the Panel will 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.
Visible by default panel component Visible by default collapsed panel component

Visible by default, but able to fully hidden

The Panel is visible by default, but allows users to fully hide the navigation.

Some rules:

  • When a Panel can be fully hidden, it should show the close icon;
  • When the Panel is hidden, a trigger icon is needed. Preferably a hamburger menu icon at top left in the UI;
  • When the Panel is visible, it still pushes the content of the main screen to the right. It will not overlap any content.
Visible by default fully hidden panel component

Hidden by default, but visible by user trigger

The Panel is visible by default, but allows users to fully hide the navigation.

Some rules:

  • The Panel won’t be visible by default, but only appears if users click or interact with the (hamburger) icon;
  • If visible, the Panel behaves modal. Therefore, the Panel overlays the main content, and not push it to the right;
  • A modal navigation always needs a trigger icon, preferably a hamburger menu icon at top left in the UI;
  • If users click somewhere outside of the Panel or interact with the close icon, the Panel will close 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 earlier options.
Hidden panel component

Behaviour

Semi-collapsed

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

Semi collapsed behaviour panel component

When users select a nested item while the Panel is fully open and then change to the semi-collapsed Panel, the parent item will remain having an activated state.

Semi collapsed behaviour panel component second

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