Dropdown options as RouterLinks.

[jwahdatehagh]

Overview of the problem

I'm looking for a nice workflow to use buefy dropdowns with routerLink or programmatic vue-router navigation.

Buefy version: ^0.4.0
Vuejs version: ^2.3.3

Description

I tried different approaches:

First:

By just placing a router-link into the b-dropdown-option:

<b-dropdown-option>
  <router-link to="/settings">
    <b-icon icon="cog"></b-icon>
    Settings
  </router-link>
</b-dropdown-option>

This results in bad UX, as the clickable area doesn't fill the entire link option element (li), due to padding set on it.

Solution: Provide some kind of class to adjust the styling of li (e.g. has-link). This would be the easiest and imo most intuitive solution.

Second: (doesn't work)

<!-- `navigateTo(path)` is defined in parent component -->
<b-dropdown-option @click="navigateTo('/settings')">
  <router-link to="/settings">
    <b-icon icon="cog"></b-icon>
    Settings
  </router-link>
</b-dropdown-option>

This would be ok, but apparently the <b-dropdown-option>-element doesn't expose the @click event.

Solution: Expose @click event on <b-dropdown-option>.

Third:

By doing it through programmatic navigation like so:

<b-dropdown position="is-bottom-left" @change="navigate">
  <b-dropdown-option :value="{type: 'link', path: '/settings'}">
    <b-icon icon="cog"></b-icon>
    Settings
  </b-dropdown-option>
</b-dropdown>

export default {
  methods: {
    navigate ({type, path}) {
      if (type === 'link') {
        this.$router.push({ path })
      }
    }
  }
}

As you can see - if you want to handle different kinds of action types, this gets kind of messy. Also, when providing a :value to <b-dropdown-option>, the selected-property of the <b-dropdown>-component is set, highlighting the option element which breaks down as soon as the user navigates to a different path using other means than the dropdown.

Solution: Provide option to handle the usage of selected on <b-dropdown>.

[jwahdatehagh]

Update: I found a workaround that's ok (RouterLink as div for easy styling):

<b-dropdown-option class="has-link">
  <router-link to="/settings" tag="div">
    <b-icon icon="cog"></b-icon>
    Settings
  </router-link>
</b-dropdown-option>

and

.has-link {
  padding: 0 !important;
  > div {
    cursor: pointer; // Enable click events on iOS
    padding: 0.5rem 1rem;
  }
}

[rafaberaldo]

I'll add the has-link prop

[jwahdatehagh]

Could you also expose the @click event on b-dropdown-option? I think that would be very useful...

[rafaberaldo]

• Add has-link prop to option
• Add click event to option
• Fix dropdown disable state (pointer events)

[corbettbarr]

Thanks for adding the options. Styling is working well for me now, using the has-link prop, and nesting the icon and text within a router-link tag like this:

<b-dropdown-option value="settings" has-link>
  <router-link :to="'/settings'" exact>
    <b-icon icon="gear" />
      Settings
  </router-link>
</b-dropdown-option>

However, the router-link-active and is-selected classes are not in sync if the user navigates to a route without using the menu. For example, if I click on "home" within my menu, and then navigate to "settings" using a link outside the menu, "is-selected" will still be enabled on the "home" dropdown option, while "router-link-active" will be enabled on the correct "settings" route.

Do I need to manually sync these options somehow?

[corbettbarr]

Regarding my comment/issue above, I figured out how to sync the router-link-active and is-selected classes within the dropdown options. Just make your v-model parameter a computed value that returns this.$route.name, and make sure your dropdown option values match your router names.