Link
Use BootstrapVue's custom b-link component for generating a standard <a>
link or RouterLink
. BLink
supports the disabled
state and click
event propagation.
Links without Router
By defaut links with no options will default to # location.
Links with Router and External Links
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.
<BLink href="https://getbootstrap.com/docs/5.3" target="_blank" rel="noopener">
External Link to Bootstrap
</BLink>
<BLink to="sample">
To page sample
</BLink>
<BLink href="#comp-ref--props">
Jump to Properties
</BLink>
Styling Links
External Links can be specified with the href
prop.
<BLink class="btn btn-primary m-2" href="https://getbootstrap.com/docs/5.3" target="_blank" rel="noopener">
External Link to Bootstrap
</BLink>
<BLink class="btn btn-primary disabled m-2" href="https://getbootstrap.com/docs/5.3" target="_blank" rel="noopener">
Disabled Link
</BLink>
Link opacity
Change the alpha opacity of the link rgba()
color value. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.
<p v-for="opacity in [10, 25, 50, 75, 100]" :key="opacity">
<BLink :opacity="opacity"> {{ opacity }} link </BLink>
</p>
You can even change the opacity level on hover.
<p v-for="opacity in [10, 25, 50, 75, 100]" :key="opacity">
<BLink :opacity-hover="opacity"> {{ opacity }} link </BLink>
</p>
Link underlines
Underline color
Change the underline’s color independent of the link text color.
<p
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<BLink :underline-variant="color"> {{ color }} link </BLink>
</p>
Underline offset
Change the underline’s distance from your text. Offset is set in em
units to automatically scale with the element’s current font-size
.
<p v-for="offset in [1, 2, 3]" :key="offset">
<BLink :underline-offset="offset"> {{ offset }} link </BLink>
</p>
Underline opacity
Change the underline’s opacity.
<p v-for="opacity in [0, 10, 25, 50, 75, 100]" :key="opacity">
<BLink :underline-opacity="opacity"> {{ opacity }} link </BLink>
</p>
Hover variants
Just like the setting opacity
has a matching opacity-hover
prop, underline-offset
and underline-opacity
have matching underline-offset-hover
and underline-opacity-hover
props. Mix and match to create unique link styles.
<BLink
:underline-offset="3"
underline-opacity="25"
underline-offset-hover="1"
underline-opacity-hover="100"
>
Mutliple variants
</BLink>
Colored Links
You can use the variant
prop to colorize links. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
<p
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<BLink :variant="color"> {{ color }} link </BLink>
</p>
Link disabled state
Disable link functionality by setting the disabled
prop to true.
Disabling a link will set the Bootstrap v5 .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"
).
a.disabled {
pointer-events: none;
}
Component Reference
<BLink>
a, router‑link
Prop | Type | Default | Description |
---|---|---|---|
active | boolean | undefined | When set to `true`, places the component in the active state with active styling |
active-class | string | 'router-link-active' | Configure the active CSS class applied when the link is active. |
disabled | boolean | false | When set to `true`, disables the link's functionality. See above for details and limitations |
exact-active-class | string | 'router-link-exact-active' | Configure the active CSS class applied when the link is active with exact match. |
href | string | undefined | Denotes the target URL of the link for standard a links |
icon | boolean | false | When set to `true`, styles an icon at the beginning or end of the link text |
no-prefetch | boolean | false | Not yet implemented To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `no-prefetch` will disabled this feature for the specific link |
no-rel |
| undefined | |
opacity | 10 | 25 | 50 | 75 | 100 | '10' | '25' | '50' | '75' | '100' | undefined | Change the alpha opacity of the link `rgba()` color value |
opacity-hover | 10 | 25 | 50 | 75 | 100 | '10' | '25' | '50' | '75' | '100' | undefined | Change the alpha opacity of the link `rgba()` color value on hover |
prefetch | boolean | undefined | To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks` |
prefetch-on | Partial<{visibility: boolean, interaction: boolean}> | undefined | Allows custom control of when to prefetch links. Possible options are 'interaction' and 'visibility' (default). |
prefetched-class | string | undefined | Not Yet Implmented: A class to apply to links that have been prefetched. |
rel | string | undefined | Sets the 'rel' attribute on the rendered link |
replace | boolean | false | Setting replace prop will call router.replace() instead of router.push() when clicked |
router-component-name | string | 'router-link' | BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. Set this this property to explicity set the name of the router component. |
router-tag | string | 'a' | Set the tag type for the link |
stretched | boolean | false | When set to `true`, makes the link's `containing block` clickable via an `::after` pseudo element |
target | LinkTarget | undefined | Sets the 'target' attribute on the rendered link |
to | RouteLocationRaw | undefined | Denotes the target route of the link. When clicked, the value of the to prop will be passed to `router.push()` internally |
underline-offset | 1 | 2 | 3 | '1' | '2' | '3' | undefined | Change the distance of the underline from the bottom of the link text |
underline-offset-hover | 1 | 2 | 3 | '1' | '2' | '3' | undefined | Change the distance of the underline from the bottom of the link text on hover |
underline-opacity | 0 | 10 | 25 | 50 | 75 | 100 | '0' | '10' | '25' | '50' | '75' | '100' | undefined | Set's the opacity of the link's underline |
underline-opacity-hover | 0 | 10 | 25 | 50 | 75 | 100 | '0' | '10' | '25' | '50' | '75' | '100' | undefined | Set's the opacity of the link's underline on hover |
underline-variant | ColorVariant | null | null | Set the color variant for the link underline independently of the link text |
variant | ColorVariant | null | null | Set the color variant for the link |
Event | Args | Description |
---|---|---|
click | value : MouseEvent - Native click event | Emitted when link was clicked |
Name | Scope | Description |
---|---|---|
default | Content to place in the link |