A <router-link> inside <b-nav-item> renders nested anchor tags

[emfluenceindia]

When a <router-link> is placed inside a <b-nav-item>, it renders a nested anchor like this:

<li class="nav-item">
	<a href="#" target="_self" class="nav-link">
		<a href="/" aria-current="page" class="router-link-exact-active router-link-active">Home</a>
	</a>
</li>

According to HTML 5 standards nesting of hyperlinks is not allowed.

Since bootstrap-vue targets Vue, there is every possibility that a could be used inside in order to maintain the structure of the DOM.

I think if we can pass a prop with <b-nav-item>, say <b-nav-item vroute>, then we can decide what to render. This prop would be optional.

If vroute, then render like this:

<li class="nav-item">
	<span class="nav-link">
		<a href="/" aria-current="page" class="router-link-exact-active router-link-active">Home</a>
	</span>
</li>

which is now valid as no nested anchor is there anymore.

Otherwise, render in usual way, i.e.

<li class="nav-item">
	<a href="#" target="_self" class="nav-link">
		<a href="/" aria-current="page" class="router-link-exact-active router-link-active">Home</a>
	</a>
</li>

It may not be super important at this stage and won't cause any real harm to an application, but it would surely be W3C and HTML5 standard compliance. Maybe giving it a thought is not a bad idea!

[Hiws]

It would be helpful if you posted the actual code you're using than the rendered HTML.

What's the reason you're placing a <router-link> inside <b-nav-item>?

<b-nav-item> supports creating a router-link if you use the to prop.
https://bootstrap-vue.org/docs/components/nav#comp-ref-b-nav-item

You can read more about which components supports creating router links here:
https://bootstrap-vue.org/docs/reference/router-links#common-router-link-props

[emfluenceindia]

Thank you @Hiws 👍