visualNav.html

<template>
  <lightning-layout multiple-rows="true">
    <template for:each={items} for:item="item">
      <lightning-layout-item class="slds-m-around_xxx-small" key={item.uniqueId}>
        <div class="slds-visual-picker" tabindex="0" onkeyup={handleKeyUp} data-outputlabel={item.label}
          data-outputsublabel={item.sublabel} data-outputvalue={item.value} data-outputunique={item.uniqueId}>
          <input type="radio" onclick={handleChange} name="visualList" id={item.uniqueId} tabindex="-1"
            title={item.label} value={item.value} data-outputlabel={item.label} data-outputsublabel={item.sublabel}
            data-outputvalue={item.value} data-outputunique={item.uniqueId} />
          <label for={item.uniqueId}>
            <span
              class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center slds-m-around_xxx-small"
              style={sizeWidth}>
              <span>
                <template if:true={showIcons}>
                  <span class="slds-icon_container">
                    <lightning-avatar variant={iconVariant} src="" class="slds-m-around_small"
                      fallback-icon-name={item.icon} size={iconSize}></lightning-avatar>
                  </span>
                </template>
                <div class="slds-text-heading_small slds-m-left_xx-small slds-m-right_xx-small">
                  {item.label}
                </div>
                <template if:true={showSubLabel}>
                  <div class="slds-text-title slds-m-left_xx-small slds-m-right_xx-small">{item.sublabel}</div>
                </template>
              </span>
            </span>
          </label>
          <span class="slds-icon_container slds-visual-picker__text-check">
            <lightning-icon icon-name="utility:check" size="x-small" variant="inverse">
            </lightning-icon>
          </span>
        </div>
      </lightning-layout-item>
    </template>
  </lightning-layout>
</template>