Change text colour with bootstrap-vue navbar item-dropdown

Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one. i had followed that process and i get the color applied to b-nav-item-dropdown which is #ffffff80 applied to this selector .navbar-dark .navbar-nav .nav-link, So let's change it to black as follow :

  <template>
  ...
 </template>
  <style>
   .navbar-dark .navbar-nav .nav-link{
      color:black!important
    }
 </style>

Pass your additional class in the toggle-class prop. For example:

<b-nav-item-dropdown toggle-class="text-dark" text="Electronics">

See https://bootstrap-vue.js.org/docs/components/nav#dropdown-support for more props this component supports.