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

<li><a href="#"><a href="/" aria-current="page">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.

Ifvroute, then render like this:

<li><span><a href="/" aria-current="page">Home</a></span></li>

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

Otherwise, render in usual way, i.e.

<li><a href="#"><a href="/" aria-current="page">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!