Kubio – the kickstart

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

Accordion 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 accordion menu block.

menu creation

You can drag the accordion menu block to the section you want on your page from the block inserter, 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 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.

Accordion menu block: customizations within the block editing panel 

The moment you select any block, the Kubio editing panel 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 accordion menu Gutenberg block across the “Content” and “Style” edits.

Content
accordion menu

At this level you can add a previously existing menu to the accordion menu. You can also toggle on an option to show only the first level of the menu.

Style

Menus are made of buttons that can have three states: normal, hover, and active. The styling options available for all of the states.  With Kubio you can stylize both the main menu and submenu buttons. Here are the available styling options:

Main menu and submenu buttons styling
  • Background color,
  • Text color,
  • Typography,
  • Space between buttons,
  • Button horizontal and vertical padding,
  • Dropdown icon spacing and size.
Advanced
accordion menu block 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 accordion 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.