Menu
I have an application I decide to use vue-bootstrap over just bootstrap for the added features like tabs. Since I already have vue-bootstrap in the project, I decided to also rewrite the nav into it. Right now I have a problem where the links in the navigation point to the correct URL, however when I click them, nothing happens. I suspect Vue internally takes control over the request to follow the link.
I have the following code in Latte templating language:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div>
<b-nav n:if="$menu->hasVisibleItemsOnMenu()">
{foreach $menu->getVisibleItemsOnMenu() as $itemsParent}
{if $itemsParent->hasVisibleItemsOnMenu() === false}
<b-nav-item n:attr="active => $itemsParent->isActive()">
<a href="{$itemsParent->getRealLink()}">{$itemsParent->getRealTitle()}</a>
</b-nav-item>
{else}
<b-nav-item-dropdown
text="{$itemsParent->getRealTitle()}"
extra-toggle-classes="nav-link-custom"
right
>
{foreach $itemsParent->getVisibleItemsOnMenu() as $item}
<b-dropdown-item n:attr="active => $item->isActive()" >
<a href="{$item->getRealLink()}">{$item->getRealTitle()}</a>
</b-dropdown-item>
{/foreach}
</b-nav-item-dropdown>
{/if}
{/foreach}
</b-nav>
</div>
</div>
</nav>
The link in the dropdown should redirect me to the page/URL in the link. Right now, nothing happens.
<head> <!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
in footer
<script>
window.app = new Vue({
el: '#app',
})
</script>
319
asked Oct 31 '25 01:10
I think I get it. The <b-nav-item> component has a href property. Inserting your code inside it, it works.
So I remove all the conditionals and just cloned the items.
window.app = new Vue({
el: '#app',
})<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>My first BootstrapVue app</title>
<!-- Required Stylesheets -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<!-- Our application root element -->
<div id="app">
<b-container>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div>
<b-nav n:if="$menu->hasVisibleItemsOnMenu()">
<b-nav-item href="https://google.com" n:attr="active => $itemsParent->isActive()">
Google
</b-nav-item>
<b-nav-item href="https://bing.com" n:attr="active => $itemsParent->isActive()">
Bing
</b-nav-item>
<b-nav-item href="https://yahoo.com" n:attr="active => $itemsParent->isActive()">
Yahoo
</b-nav-item>
<b-nav-item-dropdown text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item href="https://google.com" n:attr="active => $item->isActive()">
Google
</b-dropdown-item>
<b-dropdown-item href="https://bing.com" n:attr="active => $item->isActive()">
Bing
</b-dropdown-item>
<b-dropdown-item href="https://yahoo.com" n:attr="active => $item->isActive()">
Yahoo
</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</div>
</nav>
</b-container>
</div>
</body>
</html>There is an extra </div> in your code, I don't think that was interfering.
It's hard to say without the correct CSS, but the links seems to be working.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
