Dropdown icon for submenu

Ask the community
1

Hi, I’m working on a horizontal menu on Editor X. Some menu links have submenus. I’m desperately looking for a way to include some sort of dropdown arrow/icon so people know there’s a submenu. I’m sure Editor X must have that option, even though I didn’t find anything (neither in the help section nor in the community here).

I would appreciate help - thank you.

2

Hi Helena. Sounds like you may wanna use Velo to create a custom menu with the expand and collapse feature and add some animation to the arrow to rotate. You should be able to achieve similar with hover on effects too.

3

Thank you for your feedback - much appreciated. I can give that a go, yes. However, I really believe that Editor X should offer that as a standard feature - without using Velo. :roll_eyes:

2 Likes
4

This and many more features :slight_smile:
They are pretty good with listening to our needs. I’d encourage you to post a feature request.
Cheers.

5

feature request posted

6

Here are two code examples that are easy to follow and should get you what you need so you don’t have to wait for wix :slight_smile:
Cheers.

Collapsible sections:

Mega Menu

7

thank you

8

You can use this code (works well for me in wix studio editor)

.horizontal-menu__submenu-title {
    position: relative; /* For proper positioning of the pseudo-element */
    display: inline-flex; /* To place the arrow to the right of the text */
    align-items: center; /* To vertically align the arrow and text */
}

.horizontal-menu__submenu-title::after {
    content: ''; /* Content is empty, as the SVG will be added through the background */
    display: inline-block;
    margin-left: 8px; /* Space between the text and the arrow */
 margin-right: 8px; /* Space between the arrow and the next menu item */
    width: 12px; /* Width of the SVG arrow */
    height: 12px; /* Height of the SVG arrow */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.282 5.034"><path d="M4.64116,4.89817a.5001.5001,0,0,1-.34277-.13574L.15727.86448A.50018.50018,0,0,1,.84282.136L4.64116,3.71165,8.44.136a.50018.50018,0,0,1,.68555.72852L4.98393,4.76243A.5001.5001,0,0,1,4.64116,4.89817Z"></path></svg>') no-repeat center;
    background-size: contain; /* Scale the SVG to fit the container size */
}

In this code:

  • content: ''; is left empty because we are using the background to insert the SVG.
  • display: inline-block; allows us to set width and height for the pseudo-element.
  • margin-left: 8px; adds space between the text and the arrow.
  • margin-right: 8px; adds space between the arrow and the next menu item, ensuring they don’t stick together. You can adjust the 8px value to your preferred spacing.
  • width: 12px; and height: 12px; set the size for the SVG arrow. You can adjust these values to fit your desired dimensions.
  • background: url('data:image/svg+xml;utf8,...') no-repeat center; inserts the SVG code as a background and centers it.
  • background-size: contain; ensures the SVG scales to fit the container size.