Sidebar using simple CSS properties

Sometimes we want to show/hide a view to avoid cluttering the screen. Here is an example of how it can be done in Vaadin.

.sidebar {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: 0.5s;
  padding-left: 10px;

.show {
  right: 0;
public HelloWorldView() {


        VerticalLayout sidebar = new VerticalLayout();

        Button toggleButton = new Button("Click", event -> {
            if (sidebar.getClassNames().contains("show")) {
            } else {


        add(toggleButton, sidebar);

You can see here how the sideview is getting shown/hidden when user clicks on the Button

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.