top of page
  • Writer's pictureChris

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

  1. Better accessibility

  2. Ability to use custom icons

711 views7 comments

Recent Posts

See All

7 comentários


Orin Lugasi
Orin Lugasi
17 de out. de 2023

Hi

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?



Curtir
Todd McClain
Todd McClain
22 de jan.
Respondendo a

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>

Curtir

Juan Fach
Juan Fach
29 de abr. de 2022

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

Curtir

Joshua Dayment
Joshua Dayment
15 de jul. de 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.

Curtir

Chris
Chris
21 de abr. de 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)

Curtir

Rowan Lean
Rowan Lean
07 de abr. de 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…


Curtir
bottom of page