Topic: Navbar - disabled Dropdown item not working
Petr Urban priority asked 8 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>
CONSISTENCY CHECKS
</MDBNavbarItem>
But it is not working for Dropdowns e.g.
<MDBNavbarItem disabled>
<MDBDropdown class="nav-item" v-model="processingDropdown" disabled="true">
<MDBDropdownToggle tag="a"
class="nav-link"
@click="processingDropdown = !processingDropdown"
data-cy="testMenu">
PROCESSING
</MDBDropdownToggle>
<MDBDropdownMenu aria-labelledby="processingDropdownButton">
<MDBDropdownItem :to="{ name: 'chainProcessing' }" class="smart-nav">
Spreadsheet
</MDBDropdownItem>
<MDBDropdownItem :to="{ name: 'batchProcessing' }" class="smart-nav">
Directory
</MDBDropdownItem>
<MDBDropdownItem :to="{ name: 'scenarioProcessing' }" class="smart-nav">
Scenario
</MDBDropdownItem>
<MDBDropdownItem :to="{ name: 'batchIdProcessing' }" class="smart-nav">
Batch ID
</MDBDropdownItem>
<div class="dropdown-divider"></div>
<MDBDropdownItem :to="{ name: smartStore.resultsToShow }" class="smart-nav">
Results
</MDBDropdownItem>
<MDBDropdownItem :to="{ name: 'e2eResultsOverview' }" class="smart-nav">
E2E Results
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
the "smart-nav" class is the following: :deep(.smart-nav) { cursor: pointer; }
Is it possible disable the Dropdown somehow, please?
Thanks.
BR, Petr
Bartosz Cylwik staff answered 8 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
:style="{
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:
https://mdbootstrap.com/snippets/vue/b-cylwik/5911781#html-tab-view
Hope that helps!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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