Mixing
How to use Bootstrap-Vue with a custom navbar dropdown button?
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme. The Vue SPA was set up to use Bootstrap-Vue before I started working on it.
My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why). It seems I must use the Bootstrap-Vue tags to have this work.
However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.
I want to make the SPA look like this (image taken from the Django part of the website):
...which uses this code in the Django template:
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
...but in Bootstrap-Vue I only seem to have access to this tag:
<b-nav-item-dropdown text="Navigation" right>
...which ends up looking like this in the SPA:
So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.
Is there a way to accomplish this?
The full code for the Django navbar:
{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
<div class="container">
<a href="#" class="navbar-brand"></a>
<!--Left Menu-->
<ul class="nav navbar-nav mai-top-nav">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
</li>
</ul>
<!--User Menu-->
<ul class="nav navbar-nav float-lg-right mai-user-nav">
<li class="dropdown nav-item">
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
<div role="menu" class="dropdown-menu">
<a href="/" class="dropdown-item">
<span class="icon s7-home"> </span>Home</a>
<a href="{% url 'account_profile' %}" class="dropdown-item">
<span class="icon s7-user"> </span>Profile</a>
<a href="{% url 'account_change_password' %}" class="dropdown-item">
<span class="icon s7-lock"> </span>Password</a>
<a href="{% url 'account_logout' %}" class="dropdown-item">
<span class="icon s7-power"> </span>Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
{% endblock %}
The full (but not finished) code for the SPA's navbar:
<template>
<b-navbar toggleable="md"
type="dark"
class="mai-top-header">
<b-container>
<b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>
<!--Left Menu-->
<b-navbar-nav class="mai-top-nav">
<b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
<b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>
</b-navbar-nav>
<!--User Menu-->
<b-navbar-nav class="float-lg-right mai-user-nav">
<b-nav-item-dropdown text="Navigation" right>
<b-dropdown-item class="icon s7-home">Home</b-dropdown-item>
<b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>
<b-dropdown-item>Password</b-dropdown-item>
<b-dropdown-item>Log Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-container>
</b-navbar>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
vue.js bootstrap-4 bootstrap-vue
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
add a comment |
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme. The Vue SPA was set up to use Bootstrap-Vue before I started working on it.
My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why). It seems I must use the Bootstrap-Vue tags to have this work.
However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.
I want to make the SPA look like this (image taken from the Django part of the website):
...which uses this code in the Django template:
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
...but in Bootstrap-Vue I only seem to have access to this tag:
<b-nav-item-dropdown text="Navigation" right>
...which ends up looking like this in the SPA:
So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.
Is there a way to accomplish this?
The full code for the Django navbar:
{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
<div class="container">
<a href="#" class="navbar-brand"></a>
<!--Left Menu-->
<ul class="nav navbar-nav mai-top-nav">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
</li>
</ul>
<!--User Menu-->
<ul class="nav navbar-nav float-lg-right mai-user-nav">
<li class="dropdown nav-item">
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
<div role="menu" class="dropdown-menu">
<a href="/" class="dropdown-item">
<span class="icon s7-home"> </span>Home</a>
<a href="{% url 'account_profile' %}" class="dropdown-item">
<span class="icon s7-user"> </span>Profile</a>
<a href="{% url 'account_change_password' %}" class="dropdown-item">
<span class="icon s7-lock"> </span>Password</a>
<a href="{% url 'account_logout' %}" class="dropdown-item">
<span class="icon s7-power"> </span>Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
{% endblock %}
The full (but not finished) code for the SPA's navbar:
<template>
<b-navbar toggleable="md"
type="dark"
class="mai-top-header">
<b-container>
<b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>
<!--Left Menu-->
<b-navbar-nav class="mai-top-nav">
<b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
<b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>
</b-navbar-nav>
<!--User Menu-->
<b-navbar-nav class="float-lg-right mai-user-nav">
<b-nav-item-dropdown text="Navigation" right>
<b-dropdown-item class="icon s7-home">Home</b-dropdown-item>
<b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>
<b-dropdown-item>Password</b-dropdown-item>
<b-dropdown-item>Log Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-container>
</b-navbar>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
vue.js bootstrap-4 bootstrap-vue
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
add a comment |
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme. The Vue SPA was set up to use Bootstrap-Vue before I started working on it.
My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why). It seems I must use the Bootstrap-Vue tags to have this work.
However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.
I want to make the SPA look like this (image taken from the Django part of the website):
...which uses this code in the Django template:
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
...but in Bootstrap-Vue I only seem to have access to this tag:
<b-nav-item-dropdown text="Navigation" right>
...which ends up looking like this in the SPA:
So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.
Is there a way to accomplish this?
The full code for the Django navbar:
{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
<div class="container">
<a href="#" class="navbar-brand"></a>
<!--Left Menu-->
<ul class="nav navbar-nav mai-top-nav">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
</li>
</ul>
<!--User Menu-->
<ul class="nav navbar-nav float-lg-right mai-user-nav">
<li class="dropdown nav-item">
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
<div role="menu" class="dropdown-menu">
<a href="/" class="dropdown-item">
<span class="icon s7-home"> </span>Home</a>
<a href="{% url 'account_profile' %}" class="dropdown-item">
<span class="icon s7-user"> </span>Profile</a>
<a href="{% url 'account_change_password' %}" class="dropdown-item">
<span class="icon s7-lock"> </span>Password</a>
<a href="{% url 'account_logout' %}" class="dropdown-item">
<span class="icon s7-power"> </span>Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
{% endblock %}
The full (but not finished) code for the SPA's navbar:
<template>
<b-navbar toggleable="md"
type="dark"
class="mai-top-header">
<b-container>
<b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>
<!--Left Menu-->
<b-navbar-nav class="mai-top-nav">
<b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
<b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>
</b-navbar-nav>
<!--User Menu-->
<b-navbar-nav class="float-lg-right mai-user-nav">
<b-nav-item-dropdown text="Navigation" right>
<b-dropdown-item class="icon s7-home">Home</b-dropdown-item>
<b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>
<b-dropdown-item>Password</b-dropdown-item>
<b-dropdown-item>Log Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-container>
</b-navbar>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
vue.js bootstrap-4 bootstrap-vue
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme. The Vue SPA was set up to use Bootstrap-Vue before I started working on it.
My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why). It seems I must use the Bootstrap-Vue tags to have this work.
However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.
I want to make the SPA look like this (image taken from the Django part of the website):
...which uses this code in the Django template:
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
...but in Bootstrap-Vue I only seem to have access to this tag:
<b-nav-item-dropdown text="Navigation" right>
...which ends up looking like this in the SPA:
So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.
Is there a way to accomplish this?
The full code for the Django navbar:
{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
<div class="container">
<a href="#" class="navbar-brand"></a>
<!--Left Menu-->
<ul class="nav navbar-nav mai-top-nav">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
</li>
</ul>
<!--User Menu-->
<ul class="nav navbar-nav float-lg-right mai-user-nav">
<li class="dropdown nav-item">
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle nav-link">
<span class="user-name">{{ user.get_username }}</span>
<span class="angle-down s7-angle-down"></span>
</a>
<div role="menu" class="dropdown-menu">
<a href="/" class="dropdown-item">
<span class="icon s7-home"> </span>Home</a>
<a href="{% url 'account_profile' %}" class="dropdown-item">
<span class="icon s7-user"> </span>Profile</a>
<a href="{% url 'account_change_password' %}" class="dropdown-item">
<span class="icon s7-lock"> </span>Password</a>
<a href="{% url 'account_logout' %}" class="dropdown-item">
<span class="icon s7-power"> </span>Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
{% endblock %}
The full (but not finished) code for the SPA's navbar:
<template>
<b-navbar toggleable="md"
type="dark"
class="mai-top-header">
<b-container>
<b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>
<!--Left Menu-->
<b-navbar-nav class="mai-top-nav">
<b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
<b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>
</b-navbar-nav>
<!--User Menu-->
<b-navbar-nav class="float-lg-right mai-user-nav">
<b-nav-item-dropdown text="Navigation" right>
<b-dropdown-item class="icon s7-home">Home</b-dropdown-item>
<b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>
<b-dropdown-item>Password</b-dropdown-item>
<b-dropdown-item>Log Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-container>
</b-navbar>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
vue.js bootstrap-4 bootstrap-vue
vue.js bootstrap-4 bootstrap-vue
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
edited Nov 22 '18 at 4:16
Nathan Wailes
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
asked Nov 21 '18 at 18:08
Nathan WailesNathan Wailes
1,71731137
1,71731137
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.
I got this answer here.
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418160%2fhow-to-use-bootstrap-vue-with-a-custom-navbar-dropdown-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.
I got this answer here.
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
add a comment |
The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.
I got this answer here.
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
add a comment |
The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.
I got this answer here.
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.
I got this answer here.
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
answered Nov 22 '18 at 17:47
Nathan WailesNathan Wailes
1,71731137
1,71731137
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418160%2fhow-to-use-bootstrap-vue-with-a-custom-navbar-dropdown-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
