Sidebar
The sidebar is a basic version, working as a container that provides a flexible shell for your content.
Usage guidelines
When to use
- To show secondary actions to be done on the pages without leaving the current screen.
Specifications
Anatomy
- Close Icon
- Container (or background)
- Rounded corner
- Shadow
Variants
The sidebar is working as a container that provides a flexible shell for your content.
There are two variants available for Desktop/Tablet (Left and Right) and one for Mobile.
Sizes
The sidebar comes in two different sizes: Desktop/Tablet with a fixed width of 560 px and Mobile full width.
Styling
The Sidebar is available with Zurich White background. If needed, you can change the background color to any brand palette color.
Personalization of this components comes with the content elements or component placed in the Sidebar container.
Behavior
Positioning
Sidebars are positioned on top of the upper part of the page content, on the left or right side of the screen. In mobile viewport they use the full screen and overlay the content.
Alignment
For Desktop/Tablet the Sidebar can be left or right aligned.
Padding
The sidebar contains a fixed inner padding for the Desktop/Tablet and Mobile variant.
Interaction
After user interaction, the sidebar appears on the screen. The triggering element can be a Button component, either somewhere in the layout of the page or a floating button. If it's within he layout, it must be somewhere where it's clearly associated with the side where the sidebar will be displayed on (i.e. do not position the triggering element to the left of the layout if the sidebar would display on the right).
The sidebar disappears again when you press the close button in the sidebar's top corner.
Usage examples
The sidebar can be used for secondary actions to be done on the page.
It can for example be used to show a process, a summary, a reminder, commenting function or content placed in a modal.
Accessibility guidelines
Design considerations
- Make sure there is enough contrast between sidebar color and its background.