Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

Dropdown menu block

Menus can be created in Kubio from Menus -> Create Menu. Once your menu is created you can place it where you want using the dropdown menu block.

menu creation

You can drag the dropdown menu Gutenberg block to the section you want on your page, or add the block from any “+” sign on your canvas. 

Like in the case of the rest of Kubio blocks, the moment you select the dropdown menu block, a toolbar with options will show up on top of the block. In our chapter on “How to work with blocks” we have explained how these options work: positioning, duplicate, insert before, insert after, group, and remove block.

dropdown menu block

The block allows you to use an existing menu or start creating a new one.

Dropdown menu block: customizations within the block editing panel 

The moment you select any block, the Kubio editor will open up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block.

Let’s now check what’s specific to the dropdown menu block across the “Content” and “Style” edits.

Content

dropdown menu block content edits

At the “Content” level you can:

  • Select a previously created menu.
  • Align the buttons in the menu.
  • Choose whether to show only the first level of the menu or not. 
  • Enable the menu on various devices.

Style

Menus are made of buttons that can have three states: normal, hover, and active. The styling options available for all of the states. 

In the Kubio editor you can stylize the main menu buttons, main menu effects, and submenu buttons. 

In the case of the main menu and submenu buttons, here are the available styling options:

Style main menu buttons in the dropmenu block
  • Background color,
  • Text color,
  • Typography,
  • Space between buttons,
  • Button horizontal and vertical padding,
  • Dropdown icon spacing and size.

Regarding the effects, here are the options:

  • Button highlight type,
  • Button hover effect. You can choose between: drop in, drop out, grow from left, grow from right, and grow from center.
dropdown menu effects
Advanced
dropdown menu advanced edits

At this level, you can make edits for the normal and hover states across the: menu container, main menu / submenu items, links, and icons.  Here are the available customizations:

  • Background. Here you can make adjustments to background color and type.
  • Spacing. Here you can set up the margins and paddings for the dropdown menu block items.
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your block. Also, you can add box shadows. You have full control over the position, blur, spread, and color of the box shadow.
  • Typography. You can set up a different font family, font size, and weight for the text. You can add decorations to text, set up capitalization, and adjust line height and letter spacing. When you select the “default” option you’ll be taken to the General Settings, where you can change defaults (color scheme, typography, etc.).
  • Responsive. Here you can decide whether the block will show or not on desktop, tablet, or mobile.
  • Miscellaneous. At this level, you can set up the z-index of your block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.