This question is raised so many times in TG.

I usually build my menus in CSS and avoid the Xara Navigation Bar at almost any cost.
The main reasons are it does not allow sub-menus with any font and you are hard pressed to match into the style of your website design.
Its main advantage they do have is you can nest sub-menus but this a design style that does not work especially well in a mobile setting.

In the past, I have suggested the use of on-line CSS generators but this forces the Xara design approach into a coding one.
They still have their place, e.g., https://www.cssportal.com/css3-menu-generator/ but many designers do not want to learn about CSS and JavaScript to get these menus working.

Here, I have tried to leverage the Xara style and use its more visual approach.

METHOD
I have Grouped a symbol under a text area.
Symbol has a ClassName of symbol.
The text Area has a ClassName of menu.
I have partitioned away some CSS code.

MODIFICATIONS
This allow you to Ctrl+Right+Click the symbol and replace it with any other - no longer just a Hamburger menu.
You can easily change the symbol colour.
The text area allows you to create a list of Links, as deep as you like, on the page.
Links can share or go on a new line to act as the menu options.
Any text, any font, any size, any position any decoration, any dividers,... All visible and under your control.

Both are simple to alter as you normally do within Xara.

CODE CHANGES
All the code is in the little CSS text element off-page.
It can be Shared on all pages or code instead added into the Website Head.
It can mostly be ignored.
Those entries in :root can be tweaked for duration, colour and line widths.
Experiment but come back with questions and hopefully your own creations.

PRESENTATION
Symbol and menu should be physically apart.
The CSS code allows a reasonable delay before the menu closes if the mouse or your finger wander elsewhere.
You can avoid an overlap as this could obscure the Symbol.


I have included the Xara Navbar (paw) for comparison.
My 'compass' Menu is sitting in the !Menu layer for tidiness.
I could have left it on MouseOff but it made things look a bit messy.
Just leave it hidden and use Solo mode when editing.

CSS - Simple Symbol Menu.xar

Acorn