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.

Adding the button attribute actually does not fix it as pointer events are still disabled in open menu’s. This very much seems like a bug to me. Anyway I fixed it with the following so I do not need any extra classes:

ion-item[button] {
  pointer-events: auto !important;