Side Drawer Layer
When you want to enable a user to maintain the context of their current page, side drawer layers may be used for quickly viewing an object's detail, configuring an object, or applying filter choices.
Anatomy
See general layer anatomy for specifications applying to all layers.
Grommet properties
Apply these layer properties for a side drawer layer.
Layer closing behavior
Informational
For informational side drawer layers that do not require any user actions, place a close icon button in the layer header.
Layer title
An optional, concise subtitle for added context.
Label | Region | Purpose | Required | Notes |
|---|---|---|---|---|
1 | Close button | Closes the layer. | Use "Close" icon. |
The user should be able to dismiss the informational layer by clicking outside, onClickOutside, or using the Escape key, onEsc.
Actionable
For actionable layers, include the close icon button in the header and a "Cancel" button alongside footer actions so the user can efficiently leave the layer if desired.
Layer title
An optional, concise subtitle for added context.
Label | Region | Purpose | Required | Notes |
|---|---|---|---|---|
1 | Close button | Closes the layer. | Including the close button in the header in addition to the footer "Cancel" button ensures the user can efficiently exit the layer if desired. | |
2 | Cancel button | Closes the layer. | The footer actions should be left aligned with primary action on the left and "Cancel" button following. The "Cancel" button should always be present as a complement to the primary action, providing an easy way to leave the layer. |
To prevent the user from losing progress due to accidental clicks outside of a layer, onClickOutside functionality should not be enabled. The user should be able to dismiss the actionable layer by using the Escape key, onEsc.
Double confirmations
When data has been edited or changed and the user tries to close the layer, a double confirmation should be shown. This helps avoid unintentional loss of work.
Learn more about the anatomy and implementation of a double confirmation on the main layer page since this behavior applies to all layer types.
Scroll behavior
The default behavior of the layer is to allow all of the content to scroll, but this behavior can be modified depending on the layer's contents.
Layer contents | Sticky region | Scroll region | Notes |
|---|---|---|---|
Filters | Footer | Header and body | A sticky footer ensures the user always has access to apply, reset, or cancel out of the filter view and return to the data set. |
Form | None or header can be sticky/appear on scroll up if this added context is valueable for the use case. | Body and footer | The footer actions should be at the bottom of the form to encourage the user to see the entire form before submission. |
Sticky header
If it would be valuable for the user to maintain the context of the layer's topic, the header can be made persistent or reappear when the user scrolls up.
Persistent
If it's necessary for the user to always be able to see the layer heading, make the heading persistent and sticky.
Scroll up
In order to maximize screen real-estate when content is scrollable, the header may scroll away as the user scrolls down but reappear as the user scrolls up. This can be accomplished by applying sticky="scrollup" on Heading.
Examples
Configuration form
Filtering
Click the filter icon to see the layer. Notice the sticky footer on this layer. Refer to scroll behavior for added guidance.
Servers
Status | ||||||
|---|---|---|---|---|---|---|
Server 1 | 8899569448808967 | Not connected | On | Proliant SY 480 Gen10 | ||
Server 2 | 482148808968 | Connected | Off | Proliant SY 990 Gen9 | ||
Server 3 | 3890108963 | Not connected | Off | Proliant SY 990 Gen9 | ||
Server 4 | 8508964 | Connected | On | Proliant SY 660 Gen10 | ||
Server 5 | 3123i4264 | Connected | On | Proliant SY 660 Gen10 | ||
3M442501WV | 4208964 | Connected | Off | ProLiant DL380 Gen10 | ||
ZFD3712GP | CCD21712GP | Not connected | On | -- | ||
FTR1237J | GGF24045X | Not connected | On | -- | ||
FTRXX237J | FT0237J | Not connected | Off | -- | ||
FTR8237J | 229501KR | Connected | Off | ProLiant DL380 Gen10 | ||
2221K2501KRL | 2282501KR | Connected | On | ProLiant DL385 Gen10 Plus | ||
SGFF850T8LK | SGFF850T8LK | Not connected | Unknown | -- | ||
22833501KR | 228298501KR | Not connected | Unknown | -- | ||
SGFF850T8LK | 2332501WR | Connected | On | ProLiant DL380 Gen10 | ||
MXQ824045Q | MXQ824045Q | Connected | On | ProLiant DL360 Gen10 | ||
S76GH939821GF3 | S76GH939821GF3 | Connected | On | ProLiant DL360 Gen10 | ||
C89-20146 | C8920146 | Not connected | On | -- | ||
2LLP73300ZX | 2LLP73300ZX | Not connected | Unknown | -- | ||
DAOI-8240458 | MX78SA458 | Connected | On | ProLiant DL360 Gen10 | ||
9AS-02708SP | 9AS-02708SP | Not connected | On | ProLiant DL325 Gen10 Plus | ||
DF-R501X5.lab | DF-R501X5 | Connected | On | ProLiant DL380 Gen10 | ||
JYL150TYL | JYL150TYL | Not connected | On | -- | ||
DXS4045N | DXS4045N | Not connected | On | -- | ||
XFR.0278 | M48902278 | Connected | On | ProLiant DL360 Gen10 | ||
RRR50TXT | RRR50TXT | Not connected | Unknown | -- | ||
CFDE0YPQ | CFRT0YPQ | Not connected | On | -- | ||
rel34.lab.com | 45FREWY3 | Connected | On | ProLiant DL380 Gen10 | ||
92RO010Z | FRE43210Z | Connected | On | ProLiant DL380 Gen10 | ||
RRE44045S | 39TO24045S | Not connected | Off | -- | ||
RT21867 | CN70RT867 | Not connected | Unknown | -- | ||
IL1Kl.lab | 2M29001KH | Not connected | On | ProLiant DL380 Gen10 | ||
453FFEW3 | 56TGD321 | Connected | On | ProLiant DL360 Gen10 | ||
5G009LK | SFEL2T9LK | Not connected | On | -- | ||
TR902JG21 | TR902JG21 | Connected | On | ProLiant DL380 Gen10 | ||
RE4.322.lab | HTR340465 | Connected | On | ProLiant DL360 Gen10 | ||
LME4.ir.lab | 2M25323Y7 | Connected | On | ProLiant DL380 Gen10 | ||
34265FDE49 | MXFFO9274 | Connected | On | ProLiant DL360 Gen10 | ||
CFDE1GBW | CFDE1GBW | Connected | On | ProLiant DL385 Gen10 Plus | ||
524FAV32F | 524FAV32F | Connected | Off | ProLiant DL360 Gen10 | ||
8742DS576 | 8742DS576 | Connected | On | ProLiant DL380 Gen10 | ||
2MFD5t0110 | FDE34zh0110 | Connected | On | ProLiant DL380 Gen10 | ||
34EP0065 | 54FDE0065 | Not connected | On | -- | ||
709522R | 7621PP22R | Not connected | On | -- | ||
432DE45TH | 432DE45TH | Connected | Off | ProLiant DL360 Gen10 | ||
FG500352 | FG500352 | Connected | Off | ProLiant DL380 Gen10 | ||
0-S024046C | 0-S024046C | Connected | Off | ProLiant DL360 Gen10 | ||
U005E936 | U005E936 | Not connected | On | -- | ||
6432FSCN | 6432FSCN | Connected | On | ProLiant DL380 Gen10 Plus | ||
3234MFG5.lab | 452DF002R8 | Connected | Off | ProLiant DL380 Gen10 | ||
45FER2sW | 45FER2sW | Connected | On | ProLiant DL360 Gen10 | ||
Related
Related content you may find useful when using Side Drawer Layer.
Layer
Center Layer
Fullscreen Layer
Forms
Filtering
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.