Ion-items not clickable as button in content of ion-menu


According to the documentation for ion-item,

An ion-item can be used as a button

<!-- Item as a Button -->
<ion-item (click)="buttonClick()">
    Button Item

I have found that an ion-item cannot be used as a button (as documented) and is not receiving clicks when used with ion-content of a ion-menu. Only button-type things receive clicks in the side menu content.

Are you seeing this? I was porting code from Ionic2 to Ionic4 and found that this capability broke.
very useful for menu items.


        <ion-toolbar color="primary">
            <ion-title>Left Menu</ion-title>

    <ion-content id="left_menu_content">
            <!-- no click received -->
            <ion-item (click)="buttonClick()">
                <ion-label>Goto Feature ...</ion-label>

I figured out the voodoo by deconstructing the default “sidemenu” project. It seems that by default, the side menu content inherited (pointer-events:none) from some Ionic class.

I created
.clickable {
pointer-events: auto !important;

And then set class attribute on ion-item as class=“clickable ion-activatable”

The ion-activatable gives it the nice rollover effect.

Answer by @jason314 kind of worked for me, but I had to use following css instead

.custom-menu-item.item {
pointer-events: auto !important;

I could not find the new class in my browser, after adding it in my html.

1 Like

Same here,

Don’t want to investigate more but your tip about pointer-events: auto !important; was very helpful.

Have you seen the latest documentation? They note an important detail you perhaps may have missed:

<ion-item button (click)="buttonClick()">
         Button Item

A button property is to be present in the element. I’ve actually used it today, and it worked as expected.