Options for user menu in navigation bar

Can someone give me any ideas how to achieve a user menu in the nav bar. I think I must be being stupid as surely it's a common thing.

All I can think of to do is use Avatar component and a list box for menu items, but as you can see, it's totally not fit for purpose:-)



Hallo @rjones-cto,

I use a "Navigation" component for this. Look:

The main menuitem is set to be only a icon:

Hope this helps


Thanks Patrick! Apologies for late reply, I replied to email but it didn't appear here.

I think I am still being stupid.....

Did I choose right component, I can't get them to compress to a dropdown menu, just a list. Are you using just a select component with only icons?

It's not this either is it!


Hey @rjones-cto,

No worries. To add the SUB-menu items, click on this plus sign:

That's better!



One more question, how did you get the submenu to float outside the page boundary? Does it need custom CSS to set position: absolute or some other technique?

Thanks Patrick!

Works great here:
Test menu.json (7.5 KB)

Well you certainly solved it, I copied and pasted yours, but check this out, it's like yours is a different version to mine. Mine is navigation 3 and yours is navigation 4. Checkout the difference in config options for the 2 components.

Weird isn't it? Thanks for the solution though, works great!

Best regards


1 Like