Links

Use BootstrapVue's custom b-link component for generating a standard <a> link or <router-link>. <b-link> supports the disabled state and click event propagation.

<b-link> is the building block for most BootstrapVue components that offer link functionality.

<div>
  <b-link href="#foo">Link</b-link>
</div>

<!-- b-link.vue -->

By specifying a value in the href prop, a standard link (<a>) element will be rendered. To generate a <router-link> instead, specify the route location via the to prop.

Router links support various additional props. Refer to the Router support reference section for details.

If your app is running under Nuxt.js, the <nuxt-link> component will be used instead of <router-link>. The <nuxt-link> component supports all the same features as <router-link> (as it is a wrapper component for <router-link>) and more.

Typically <a href="#"> will cause the document to scroll to the top of page when clicked. <b-link> addresses this by preventing the default action (scroll to top) when href is set to #.

If you need scroll to top behaviour, use a standard <a href="#">...</a> tag.

Disable link functionality by setting the disabled prop to true.

<div>
  <b-link href="#foo" disabled>Disabled Link</b-link>
</div>

<!-- b-link-disabled.vue -->

Disabling a link will set the Bootstrap V4 .disabled class on the link as well as handles stopping event propagation, preventing the default action from occurring, and removing the link from the document tab sequence (tabindex="-1").

Note: Bootstrap V4 CSS currently does not style disabled links differently than non-disabled links. You can use the following custom CSS to style disabled links (by preventing hover style changes):

a.disabled {
  pointer-events: none;
}

Not all browsers support pointer-events: none;.

Component reference

PropertyTypeDefault Value
href String
rel String
target String_self
active Booleanfalse
disabled Booleanfalse
to String or Object
append Booleanfalse
replace Booleanfalse
event String or Arrayclick
active-class String
exact Booleanfalse
exact-active-class String
router-tag Stringa
no-prefetch Booleanfalse
EventArgumentsDescription
clickwhen link clicked

Importing individual components

ENHANCED in 2.0.0-rc.20 You can import individual components into your project via the following named exports:

ComponentNamed ExportImport Path
<b-link>BLinkbootstrap-vue/es/components

Example:

import { BLink } from 'bootstrap-vue/es/components'
Vue.component('b-link', BLink)

Importing as a Vue.js plugin

ENHANCED in 2.0.0-rc.20 Importing plugins has been simplified.

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

The plugin can be imported via several methods
Named ExportImport Path
LinkPlugin PREFERREDbootstrap-vue/es/components
Link DEPRECATEDbootstrap-vue/es/components
default DEPRECATEDbootstrap-vue/es/components/link

Example:

// Importing the named export
import { LinkPlugin } from 'bootstrap-vue/es/components'
Vue.use(LinkPlugin)

// Or importing the default export (deprecated)
import Link from 'bootstrap-vue/es/components/link'
Vue.use(Link)