How does the burger / dropdown / popover block work?

Hi, this is Sandra from GREYD and today I want to show you the various possibilities that are offered to you by our popover block which exists in various variations. You can use it for example to create inline popups, to create dropdown menus or also burger and off-canvas or overlay menus. So lots of lots of possibilities. And how it works is what I’m going to show you in this video.

As already said, we have several variations of our popover block. What they all have in common is that you can first decide what screen sizes you want it to be visible. That way for example when used in the header template you can create burger menus that are only visible on mobile screens. In general, the popup block always consists of two parts. The first is the button or burger, which you can select here. And the second is the popup, overlay, off-canvas or dropdown.

Let’s start with the options for the popover button. If you select “button” here, you will find the regular styling and setting options of GREYD.Buttons. And if you switch to burger, you can then switch between different burger styles and also shapes. You can make some color adjustments for the burger and its background, also with hover effect and individually per breakpoint. There are settings for size, border radius, line weight, spacers, etc., so you can style the burger individually.

We then also have the second part and we will start with the first variation, which is the popup. You can easily define where you want the popup to be positioned and where you want it to come from. You have size options, again individually per breakpoint if you like. Same for spaces inside and outside. You can define whether and how you’d like to have the close button, or even have no close button at all. And then you have various design options, for example colors for text, background, close button and even for the backdrop, which is the page in the background of your popover. You can change colors, work with border, border radius, shadows, define the size of the close button and also set effects for the backdrop.

So much for the popup. You can place it inline anywhere on your page, also in the header, wherever you want. Same goes for off-canvas and overlays. Let’s just have a look at the frontend to see the difference. Here we have the overlay variant. Overlay already indicates that it lays above the content, while the off-canvas variation moves the content to the side. The options are more or less the same. The only difference is the positioning: left, top, bottom, right. And same for the off-canvas variation. By the way, you can always close or hide the animation here.

The last variation we have is the dropdown variation. The options are the same. The only difference is that you have a small triangle. You can’t see it right now, but there’s a small triangle where the popup opens and you can define its size and color.

So much to the settings. The rest is the same. As to what you put inside your popup or inside your dropdown or inside your off-canvas and burger menus, you are completely flexible. You can put any content you like in your popup and you can work just as usual with any block there is.

More infos, videos and FAQ tips in our Helpcenter.