Topic: Navbar - disabled Dropdown item not working

Petr Urban priority asked 6 months ago

Dear MDB,

I would like to disable some of the Navbar items or if possible the whole Navbar in some cases - conditionally.

It is working fine for this kind of items:

<MDBNavbarItem :to="{name: 'consistencyChecks'}" data-cy="consistencyChecksMenu" disabled>

But it is not working for Dropdowns e.g.

<MDBNavbarItem disabled>
    <MDBDropdown class="nav-item" v-model="processingDropdown" disabled="true">
            <MDBDropdownToggle tag="a"
                               @click="processingDropdown = !processingDropdown"
            <MDBDropdownMenu aria-labelledby="processingDropdownButton">
              <MDBDropdownItem :to="{ name: 'chainProcessing' }" class="smart-nav">
              <MDBDropdownItem :to="{ name: 'batchProcessing' }" class="smart-nav">
              <MDBDropdownItem :to="{ name: 'scenarioProcessing' }" class="smart-nav">
              <MDBDropdownItem :to="{ name: 'batchIdProcessing' }" class="smart-nav">
                Batch ID
              <div class="dropdown-divider"></div>
              <MDBDropdownItem :to="{ name: smartStore.resultsToShow }" class="smart-nav">
              <MDBDropdownItem :to="{ name: 'e2eResultsOverview' }" class="smart-nav">
                E2E Results

the "smart-nav" class is the following: :deep(.smart-nav) { cursor: pointer; }

Is it possible disable the Dropdown somehow, please?


BR, Petr

Bartosz Cylwik staff answered 6 months ago

Hi! You want to disable the functionality of the dropdown right? You can do this in two ways:

1, By setting the pointer-events:none styles to the dropdown wrapper

          pointerEvents: disabled ? 'none' : 'auto',                

2, Or by updating the toggle method that decides whether the dropdown should be opened or not

@click="!disabled && (dropdown1 = !dropdown1)"

I think though the second one may be better, because styles can be changed inside inspect tools by the users, allowing them to open the dropdown when they should not. You can also combine both of them If you wish.

You can checkout my snippet for this case here:

Hope that helps!

Petr Urban priority commented 6 months ago

Yes, that's exactly what I want. Thank you very much!!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: macBook
  • Browser: chrome
  • OS: Mac OS Ventura 13.6.3
  • Provided sample code: No
  • Provided link: No