Chris

Updated Visual Menu

Thank you for the positive feedback the Visual Menu received. I have updated the component with an additional feature that was recently requested. A new attribute is now available that allows you to adjust the size of the button! This attribute allows you the specify the pixel size of the box.

Example:

Box Size: 125

Box Size: 150

Box Size: 200

Box Size: 250

Here is the code:

visualNav.html

visualNav.js

visualNav.js-meta.xml

Upcoming Features

Better accessibility
Ability to use custom icons

7 Comments

Orin Lugasi

Oct 17, 2023

It looks like there is a bug and the icons are not aligned to the left instead of the center?

This started in all flows we have with this component, can you help?

Todd McClain

Jan 22

Replying to

love this component. I had the same problem, on line 17-18 of the html, if you add the absolute center tag, it will align the icons. here what my modified line reads: <lightning-avatar variant={iconVariant} src="" class="slds-m-around_small slds-align_absolute-center" fallback-icon-name={item.icon} size={iconSize}></lightning-avatar>

Juan Fach

Apr 29, 2022

Would be possible to use any other image instead of these icons?

Joshua Dayment

Jul 15, 2020

Hey Chris this has been great I updated my version of this from your original code to accept a custom icon using an image URL that is passed via a string collection more than happy to share it's really easy and it has been great.

Chris

Apr 21, 2020

Thank you for the feedback Rowan! I have been a bit distracted due to COVID-19 but things are settling down. I will investigate the bug you reported and a few new features (such as adjusting the text size)

Rowan Lean

Apr 07, 2020

Thanks for this, Chris. I am loving it so far.

For anyone that happens to come across this and is unable to get it deployed, a packaged version is available here: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6g000006f1ej

A couple of things for Chris:

1. When attempting to use a standard:close (or similar) icon, regardless of the size or shape, it appears as though the icon is placed out of alignment (the icon appears below and to the right of where it should be)

2. It would be awesome to be able to specify the text size for the label ( xsmall,small, medium etc) as right now, it's hard to come up with text label descriptions that allow the icons to stay in alignment with each…