I found the dropdown menu code in SLDS menu, but the menu doesn't close and stays open. I tried removing the slds-dropdown-trigger, but then it behaves like on hover rather than onClick. I want to know how can i produce the dropdown menu onClick in Lightning Web Component.

2 Answers 2


You just need to remove the 'slds-is-open' class


    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open my-menu">
        <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="Show More">
            <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            <span class="slds-assistive-text">Show More</span>
        <div class="slds-dropdown slds-dropdown_left">
            <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                <li class="slds-dropdown__item" role="presentation">
                    <a href="javascript:void(0);" role="menuitem" tabindex="0">
                        <span class="slds-truncate" title="Menu Item One" onclick={onClick}>Click Me!</span>



And then you can open the menu again by doing the same in reverse, i.e:

  • 1
    This code worked, thanks a load, but it needs some tweaks. The querySelector returns null when executed, so instead of 'my-menu', we have to use '.my-menu'.
    – Richard
    Commented Feb 13, 2020 at 2:43

If you're writing an LWC component, why not use a Button Menu?

Here's a sample code for a "Button Menu with Custom onselect Behavior" example from the documentation page:


    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            Button-menu with a custom <code>onselect</code> event handler. Click the button to view its menu then select an item. The value of the item selected will be shown below.

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg">
            <lightning-button-menu alternative-text="Show menu" variant="border-filled" onselect={handleOnselect}>
                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>

        <div class="slds-m-vertical_medium">
            <p>The value of the menu item that was selected is: <span class="slds-text-heading_small">{selectedItemValue}</span></p>


import { LightningElement, track } from 'lwc';

export default class ButtonMenuOnselect extends LightningElement {
    @track selectedItemValue;

    handleOnselect(event) {
        this.selectedItemValue = event.detail.value;


.lgc-bg {
    background-color: rgb(242, 242, 242);

.lgc-bg-inverse {
    background-color: rgb(22, 50, 92);
  • Problem with the above code is that I don't want to see that dropdown arrow at the end, and i tried removing it but it's class is hidden so i am unable to do so.
    – Richard
    Commented Feb 13, 2020 at 2:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .