This arose from ideas developed in
It does not replace Xara's NavBar approach as it does not handle sub-sub-menus.

Where it wins is it allows you to create a flexible menu set that matches the rest of your design without having to use lots of extra layers.
Its original purpose was to allow a hamburger-style menu for your Variant without having to build a Xara NavBar, handle layers and muck around with with a graphic for a hamburger.

The symbol part of the menu structure can be any monotone SVG shape you chose.
Actually, the requirement is a single shape so it could have a linear gradient.
Xara for some reason has not managed to allow linear gradients in any direction other than up/down or left/right. If other, the SVG becomes an image.
This design can actually handle images or text as the 'symbol', you just have to build in your own roll-over effects.

The symbol is grouped with a Text object. They also have to be given ClassNames of htmlclass="symbol" & htmlclass="menu" respectively.
The symbol can be anything. The menu can be anywhere. You have control.

The glue that makes it all work is some CSS code.
All it does is hides the menu part until the symbol is hovered over.
The menu is revealed and if you move off the symbol, you have a short time before the menu disappears.
If, in that time you hover over the menu, it stays visible until you leave it. On SmartPhones, the menu stays open until you click out of it.

The menu is given a border and a white background on it showing.
You have a number of CSS Variables that you can tweak, squirreled away in the !Menu layer and lock in a Placeholder Body.

The following design file has a Help layer as well:
CSS - Symbol Menus.xar - I've omitted the Contour image to keep the file small.

It is all CSS until a Firefox user comes along.
I have had to develop some JavaScript to handle them and it is in the Website Head.
Sometime Firefox may catch up and this JS can be dropped.