# Items

The  main menu and sub menu items properties allow you to customise the items in the main and sub menus by adjusting characteristics such as: Colour, Layout, Icon, Typography, Spacing, Borders etc.

<figure><img src="https://lh3.googleusercontent.com/QTbZDyXY40Ozd7V0UXiOttqm9flvjEoodJmYlcABc0DXysysE5XZSnHlJxzTd9x8ceUqQQPNn-eH7bEcZ52yJRFA4kEkX7R9VjCWe-LXx2wOMoEbXSpPhPsd2apYYppWlwy4uWP5TcW2AyEBUkmXrzZfxDmPsBRcarLjq3aNJxsg8MlLFTmhVR7cxn1T6Q" alt=""><figcaption></figcaption></figure>

## Colours&#x20;

The Colours tab allows you to modify the colour of your Icon, Link or Background.

![](https://lh4.googleusercontent.com/nnJnZ-4RhJkETcJsFu4sOjm2wB8SsjOWyapFSmnfEYAfsKCPMqvJo6E-hyqrRuBFIPBS8DD7bBcYjhG8h_CTzV4_AFe7USTK_aXvntVOPcpJasseOfwWO6Qcoi5O5iEBuyHc9Z-HoQF0QV47TpNMhCgf1o37amEUuSq7nyIu1h2V18xt3XDxKZNehU_VGw)

### Icon

The `Icon Colour` property allows you to choose a colour for your Dropdown Icon.

<details>

<summary>Modify Icon Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main/Sub tab
5. Open Items tab
6. Find Colours property
7. Find Icon colour
8. Modify Icon Color

</details>

<details>

<summary>Reset Icon Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main Menu tab
5. Open Items tab
6. Find Colours property
7. Find Icon colour
8. Click dot to reset

</details>

### Link

The Link Colour property allows you to choose a colour for your Main Menu Items.

<details>

<summary>Modify Link Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Find Link colour
7. Modify Link colour

</details>

<details>

<summary>Reset Link Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Find Link colour
7. Click dot to reset

</details>

### Background

The Background property allows you to choose a Background colour for your Main Menu Items.

<details>

<summary>Modify Background Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Find Background colour
7. Modify Background colour

</details>

<details>

<summary>Reset Background Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Find Background colour
7. Click dot to reset

</details>

## Layout

The Main Menu Layout tab allows you to modify the Layout of our Main Menu Items such as: flex-start, centre, flex-end, space-between, space-around etc.

![](https://lh3.googleusercontent.com/bcajlU9Eker3wnLDuVF254mPjylVj9MIsODsfJS2A7Waosbdjf6aMi2UdIm-qfcDEBurZneHGXDOdSUnkny4Mr3q-vAP9C5n0jH4HNf3vQZfzSEjXxuXbpM049-sUgsLO0G-ujBbjCryccHCB6coC1AfmsWxjvnU0-jQTvXf-kRn-4s58x2zW4-XGYOUdQ)

<details>

<summary>Modify Layout</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Open Layout tab
7. Choose Layout (flex-start, centre, flex-end, space-between, space-around etc)

</details>

<details>

<summary>Reset Layout</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Items tab
6. Open Layout tab
7. Click dot to reset

</details>

## Icon

The icon properties allow you to add an icon to items that contain a sub menu item.&#x20;

{% hint style="danger" %}
Icons will not show up if no size is specified for the sizing property.
{% endhint %}

![](https://lh6.googleusercontent.com/_lmDw1pPqjSl257c77oTm3_7VZ2MG2JtNHB9Y5lLEp-15LCa68C7ZRjbM6AtdnVkXGAfDsXjXhTts3N2flXmE2x95g-CS7ysT61l9eSJ1keeUop8njTTA2wNihr3qm2LFejej3PCJuNJ9gimfQ1NZSPoxQNdX4HJu-lKHRUOH0mc-JwefayL7NzMx5qOBg)

<details>

<summary>Select Icon</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon

</details>

<details>

<summary>Deactivate Icon</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to deactivate&#x20;

</details>

You can choose the `Size`, `Spacing` and `Position` of the Menu Icon.

### Size

The `Size` property allows you to choose a size for your Main Menu Icon.

<details>

<summary>Modify Size</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon
9. Find Size
10. Modify Icon Size

</details>

<details>

<summary>Reset size</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon
9. Find Size
10. Click dot to reset

</details>

### Position

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

<details>

<summary>Choose Position</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon
9. Find Position
10. Choose Icon Position (Before or After)

</details>

### Spacing

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

<details>

<summary>Adjust Spacing</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon
9. Find Spacing
10. Modify Icon Spacing

</details>

<details>

<summary>Reset spacing</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click Active to activate Icon
7. Click Icon  image to open Icon library
8. Select an Icon
9. Find Spacing
10. Click dot to reset

</details>

## Typography

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

![](https://lh5.googleusercontent.com/_kQEUjlWTI-FRrZK0KmKRV7aWP3LE2oLkKDh6D4hYEBBv8saY04eP_rJ5SrWgFVouQ5wYUETJJvLNV8HiY3DfACMmrlSHvM8CdPpSTmCzNglYZs-YwbETEAdNg9Fb3TMQLKmJ-JHu6Q60C4WUhaalP0N0zmfCQOFJbnWUFcfBGIieLvntozNr_lJG2Nscg)

<details>

<summary>Typography</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Typography tab
7. Select required Typography (font, size, spacing, height etc)

</details>

## Spacing

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

![](https://lh6.googleusercontent.com/A7UprEVdEWFi3Q6wRLQjahXpVY5HNY8TwhnTqiKfuML8DNWM85J1fB4pTkEyUGTCtGJRSHesI_VoezTJxzDoiS37bNu2xkUa9b14Hh_5U3HO0rJdpWOgucexp4AFNZoFS3reuP0q0UKi0pYt7hTut-guMEE-Det3iehNbPSUYPs6Dw7E_sGq82D3Ii06Dg)

### Padding

The Main Menu Items Padding property allows you to modify the space inside the border of an element.

<details>

<summary>Modify Padding</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Spacing tab
7. Find Padding
8. Adjust linked or unlinked Padding&#x20;

</details>

<details>

<summary>Reset Padding</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Spacing tab
7. Find Padding
8. Click dot(s) to reset

</details>

### Margins

The Main Menu Items Margins property allows you to modify the space outside the border of an element.

<details>

<summary>Modify  Margins</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Spacing tab
7. Find Margin
8. Modify Margin either linked or individually (top, bottom, left and right).

</details>

<details>

<summary>Reset Margins</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Spacing tab
7. Find Margin
8. Click dot(s) to reset

</details>

## Borders

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

![](https://lh4.googleusercontent.com/ZFA9vR0mCLhJ8Gur3MfMK1nvfnSB6kv2JyYU2fYrmuvLQDF69otcWtZmaETng1HRJEBWqqEOj2z8QzPpP81SzAw5l9Kr0XOKqA7TIEWtqvKii6Gsbyj9fvEM2dWlmQffVI0LCfR3RlZX2oN58veJ6TrD08RMsm4JsXagG1GwYCYl5_MiumX7dKKqDvg1OQ)

### Radius

The `Radius` property allows you to add a radius to your Main Menu Items Borders.

<details>

<summary>Modify Radius</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Open Borders tab
7. Find Radius
8. Modify Radius,  linked or individually (top, bottom, left and right corners).

</details>

<details>

<summary>Reset Radius</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Find Radius
8. Click dot to reset all or selected radius

</details>

### Colour

The `Border Colour` property allows you to choose the colour of your Maim Menu Items Borders.

<details>

<summary>Select Border Colour</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Find Border
8. Choose colour

</details>

<details>

<summary>Reset Border Color</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Find Border
8. Click dot to reset

</details>

### Style

The `Border Style` property allows you to select a style for your Main Menu Items Border, such as solid, dotted or dashed.

<details>

<summary>Select  Border Style</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Select Style (Solid, dotted, dashed)

</details>

<details>

<summary>Reset border style</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Click X to reset

</details>

### Width

The `Border Width` property allows you to select a style for your Main Menu Items Border.

<details>

<summary>Select Border Width</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Find Width
8. Choose width, either linked or unlinked

</details>

<details>

<summary>Reset Border Width</summary>

1. Select a Cwicly Menu block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Open Main menu tab
5. Open Main Menu Items tab
6. Click to open Borders tab
7. Find Width
8. Click dot(s) to reset

</details>