Powered by

# Menu

The Menu property is a clickable list of Items separated by an empty space. The Menu Items have the same color.

The Menu contains Main Menu Items but can also contain a Sub Menu with Sub Menu Items.

# Select Menu

If you want to add a Menu outside any other block on the page:

  1. Click on the ➕ ​​icon to open the Inserter Panel
  2. Search for the Cwicly Menu block
  3. Click on the Cwicly Menu block to insert it into your page

If you want to add a Menu inside a parent block:

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Menu block
  3. Click on the Cwicly Menu block to insert into your parent block

# Layout

The Layoutproperty allows you to display your menu in either a Horizontalor .a Verticaldisposition.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Layout
  5. Select layout, either Horizontal or Vertical

# Link

The Linkproperty allows you to select a color for your Linked menu items.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Link
  5. Select layout, either Horizontal or Vertical
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Link
  5. Click link button to reset

# Main Menu

The Main Menu property allows you to style the Menu block by adjusting the Background, the Padding and the Margins.

# Background

The Background property allows you to select a color for your Menu block.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Select Background
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Background button to remove

# Padding

The Padding property allows you to add Padding to your Menu block.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Add Padding, either Linked or individually to Top, Bottom, Left or Right
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Padding button to remove

# Margin

The Margin property allows you to add Margins to your Menu block.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Add Margins, either Linked or individually to Top, Bottom, Left or Right
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Margin button to remove

# Main Menu Items

The Main Menu Items property allows you to customize the Items in the Main Menu.

# Icon

The Icon property allows you to add a clickable Icon to your Menu that opens a Sub Menu dropdown. It will not show up on the Menu Block until you give it a size in the Icon dropdown. You can choose an Icon from the library or add your own.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click Icon to open Icon library
  6. Click Active to activate
  7. Select an Icon
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Icon to open Icon library
  6. Click Active to deactivate

# Dropdown Icon

The Dropdown Icon property allows you to choose the Size, Spacing and Position of the Menu Icon.

# Size

The Size property allows you to choose a size for your Dropdown Icon.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click Dropdown Icon to open customizations
  6. Modify Dropdown Icon Size
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Dropdown Icon to open customizations
  6. Click Size button to deactivate

# Spacing

The Spacing property allows you to add Space between the Icon and the Menu Item to let it breathe.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click Dropdown Icon to open customizations
  6. Modify Dropdown Icon Spacing
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Dropdown Icon to open customizations
  6. Click Spacing button to deactivate

# Position

The Position property allows you to Position the Icon before or after the Menu Item for more flexibility.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click Dropdown Icon to open customizations
  6. Choose before or after as Dropdown Icon Position

# Icon Color

The Icon Color property allows you to choose the color for your Dropdown Icon.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Modify Icon Color
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Icon Color button to reset

# Text Color

The Text Color property allows you to choose the Text color for your Menu Items.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Modify Menu Items Text Color
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu dropdown
  5. Click Menu Items Text Color button to reset

# Background Color

The Background Color property allows you to modify the Background color of your Menu Items.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Modify Background Color
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click Background Color button to reset

# Menu Items Position

The Menu Items Position property allows you to choose the position of your Menu Items, such as flex-start, center, flex-end etc.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Choose Position

# Menu Items Typography

The Menu Items Typography property allows you to choose the typography for your Main Menu such as font, size, spacing, height etc.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Open Menu Items Typography
  6. Choose Menu Items Typography

# Menu Items Spacing

The Menu Items Spacing property allows you to customize the space around your Main Menu Items, such as Padding and Margins.

# Menu Items Padding

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Navigate to Spacing
  6. Modify Padding either linked or individually (top, bottom, left and right).
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Navigate to Spacing
  6. Click Padding button to reset

# Menu Items Margins

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Navigate to Spacing
  6. Modify Margins either linked or individually (top, bottom, left and right).
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Navigate to Spacing
  6. Click Margins button to reset

# Main Menu Items Borders

The Borders property allows you to add and style Borders to your Main Menu Items, such as radius, color, style and width.

# Border Radius

The Radius property allows you to add a radius to your Main Menu Items Blocks

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Modify Radius either linked or individually (top, bottom, left and right corners).
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Click Radius button to reset all or selected radius

# Border Color

The Border Color property allows you to choose the color of your Maim Menu Items Borders

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Select Color
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Click Border Color button to reset

# Border Style

The Border Style property allows you to select a style for your Main Menu Items Border, such as continous, dots or dashes.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Select Style
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Click Cross to remover Border Style

# Border Width

The Border Width property allows you to select a style for your Main Menu Items Border, such as continous, dots or dashes.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Select Width, either linked or unlinked
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click to open Borders dropdown
  6. Click button to remover Border Width

# Main Menu Items Pseudo-Classes

The Main Menu Items Psuedo-Class property allows you to choose special states of the Main Menu Items such as Hover, Active, Focus, Before and After.

  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Enable Pseudo-States by Clicking 'Active' button
  6. Choose desired special state in the dropdown such as Hover, Active, Focus, Before, After
  1. Select a Cwicly Menu block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Main Menu Items dropdown
  5. Click 'Active' button to disable Pseudo-Classes

# Sub Menu and Sub Menu Items

The Sub Menu and the Sub Menu Items allow you to customize your Sub Menus and Sub Menu Items in the same way as the Main Menu and the Main Menu Items.

© Copyright 2022. Cwicly. All rights reserved.