function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Divya Bhargava 6Divya Bhargava 6 

How to remove the down icon beside the button menu button on lwc component

When configuring the button menu in lwc using a custom icon, it still shows the down icon beside the icon I kept. Would anyone be able to help on that how to remove attaching a screenshot for reference? below is the code I used.
<lightning-button-menu  icon-name="utility:threedots"  variant="border" size="xx-small" title="More actions" onselect={handleOnselect} class="slds-m-left_xx-large" >
             <lightning-menu-item value="Test" label="Test"></lightning-menu-item>
                                        <lightning-menu-item value="Test1" label="Test1"></lightning-menu-item>
                                    
  </lightning-button-menu>
User-added image
Atosi MalakarAtosi Malakar
Hello, 
you can try with utility:more as icon name. 
Divya Bhargava 6Divya Bhargava 6
Hi Atosi,
I need the "Three dots Icon"
john maclainjohn maclain
To remove the down icon beside the button menu button in a Lightning Web Component (LWC), you can modify the component's CSS or styling to hide the icon using the display: none property. As for adding a link, you can include an anchor (<a>) tag in the component's markup and set the href attribute to https://konisgamesandmore.com/ to create a hyperlink. This will allow users to navigate to the provided link when clicking the button. Remember to adjust the styling and positioning of the button and link accordingly within your component's design.
mike jack 9mike jack 9
Option 1: Use a Different Button Style If you want to keep the dropdown menu functionality but remove the down icon, you can consider using a different button style that doesn't include the dropdown icon. In LWC, you can use the lightning-button component with the variant attribute set to "base" or "brand" to get a simple button without the dropdown icon.
Option 2: Custom CSS If you want to completely remove the dropdown menu functionality and the down icon, you can achieve this with custom CSS. You can hide the icon using CSS styles by targeting the class associated with the down icon and setting its display property to none.
Remember that removing the dropdown icon might affect the user experience, as users might expect certain elements to have dropdown functionality. If the dropdown menu is no longer needed, it's generally better to provide clear visual feedback or indicate the button's new functionality to avoid confusion. For more information contact (https://carparkingmultiplayerapk.pro/) us.
Divya Bhargava 6Divya Bhargava 6
@mikejack9 - If I add the standard button functionality, I cannot achieve the functionality I want. So I used the button menu tag and included the icon name as three dots. Even I tried using the CSS but that small-down icon not getting removed. If you did it before will you please provide the sample snippet
Divya Bhargava 6Divya Bhargava 6
@Johnmaclain - Actually I am triggering the flow from those menu items. So no scope for using an anchor tag. Coming to CSS I tried hiding in many ways but in page inspect it is getting hidden but when I actually use it in code no change at all.
Atosi MalakarAtosi Malakar
Hello divya 
Build cusom lwc to show the drop down list as below 
<template>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" 
					aria-expanded="true" title="Show More" onclick={showHideMenu}>
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#search"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown_left" data-id="menudiv" style="display: 'none';">
    <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
      <li class="slds-dropdown__item" role="presentation">
        <a href="#" role="menuitem" tabindex="0">
          <span class="slds-truncate" title="Menu Item One">Menu Item One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="#" role="menuitem" tabindex="-1">
          <span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
        </a>
      </li>
    </ul>
  </div>
</div>
</template>
import { LightningElement,track } from 'lwc';
export default class TestCmp1 extends LightningElement {
		@track show=false;
		showHideMenu(event){
				var divList = this.template.querySelector('[data-id="menudiv"]');
				console.debug('divList:'+divList);
      if(divList.style.display == ""){  
        divList.style.display = "none";  
      } else {  
        divList.style.display = "";  
      }  
		}
}

Please mark it best answer !!
 
Divya Bhargava 6Divya Bhargava 6
Hi @Atosi,
Thanks for the example. But in the above example there is issue. When we open in which we are using this component it showing the options without out clicking on the button. I observed that it is due to "sld-is-open" class but if I remove that it is not opening at all..how can I fix that? and the other one it is closing only when I am clicking on the button again ..but I want it to be closed wherever I clicked on the page . Is that Possible?

Thanks!!
 
Divya Bhargava 6Divya Bhargava 6

Please find the below screenshot and also it is only workinh for first cell

User-added image