diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md
index c7b3e279bc7..b885b64295b 100755
--- a/src/components/navbar/README.md
+++ b/src/components/navbar/README.md
@@ -272,10 +272,12 @@ Use the `<b-navbar-toggle>` component to control the collapse component, and set
 
 Set the `toggleable` prop on `<b-navbar>` to the desired breakpoint you would like content
 to automatically collapse at. Possible `toggleable`values are `sm`, `md`, and `lg`. Setting
-`togleable` to `true` (or with no explicit value) will set the breakpoint to `sm`, while
+`toggleable` to `true` (or with no explicit value) will set the breakpoint to `sm`, while
 setting it to `false` will disable collapsing.
 
-`<b-navbar-toggle>` should be placed _before_ any `<b-collapse is-nav>` component.
+`<b-navbar-toggle>` components are left-aligned by default, but should they follow a sibling
+element like `<b-navbar-brand>`, they’ll automatically be aligned to the far right. Reversing
+your markup will reverse the placement of the toggler.
 
 See the first example on this page for reference, and also refer to
 [`<b-collapse>`](/docs/components/collapse) for details on the collapse component.
diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index 4302e7ffa53..e8be132f376 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -1,3 +1,50 @@
-import bNavbarToggle from './navbar-toggle.vue';
+import { listenOnRootMixin } from '../../mixins';
 
-export default bNavbarToggle;
+export default {
+    mixins: [listenOnRootMixin],
+    render(h) {
+        const t = this;
+        return h(
+            'button',
+            {
+                class: [ 'navbar-toggler' ],
+                attrs: {
+                    type: 'button',
+                    'aria-label': t.label,
+                    'aria-controls': t.target,
+                    'aria-expanded': t.toggleState ? 'true' : 'false'
+                },
+                on: { click: t.onClick }
+            },
+            [ t.$slots.default || h('span', { class: [ 'navbar-toggler-icon' ] }) ]
+        );
+    },
+    data() {
+        return {
+            toggleState: false
+        };
+    },
+    props: {
+        label: {
+            type: String,
+            default: 'Toggle navigation'
+        },
+        target: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+        onClick() {
+            this.$root.$emit('bv::toggle::collapse', this.target);
+        },
+        handleStateEvt(id, state) {
+            if (id === this.target) {
+                this.toggleState = state;
+            }
+        }
+    },
+    created() {
+        this.listenOnRoot('bv::collapse::state', this.handleStateEvt);
+    }
+};
diff --git a/src/components/navbar/navbar-toggle.vue b/src/components/navbar/navbar-toggle.vue
deleted file mode 100755
index 4e62ece9262..00000000000
--- a/src/components/navbar/navbar-toggle.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <button :class="classObject"
-            type="button"
-            :aria-label="label"
-            :aria-controls="target.id ? target.id : target"
-            :aria-expanded="toggleState ? 'true' : 'false'"
-            @click="onclick"
-    >
-        <slot><span class="navbar-toggler-icon"></span></slot>
-    </button>
-</template>
-
-<script>
-import { listenOnRootMixin } from '../../mixins';
-
-export default {
-    mixins: [listenOnRootMixin],
-    computed: {
-        classObject() {
-            return [
-                'navbar-toggler',
-                'navbar-toggler-' + this.position
-            ];
-        }
-    },
-    data() {
-        return {
-            toggleState: false
-        };
-    },
-    props: {
-        label: {
-            type: String,
-            default: 'Toggle navigation'
-        },
-        position: {
-            type: String,
-            default: 'right'
-        },
-        target: {
-            type: String,
-            required: true
-        }
-    },
-    methods: {
-        onclick() {
-            this.$root.$emit('bv::toggle::collapse', this.target);
-        },
-        handleStateEvt(id, state) {
-            if (id === this.target) {
-                this.toggleState = state;
-            }
-        }
-    },
-    created() {
-        this.listenOnRoot('bv::collapse::state', this.handleStateEvt);
-    }
-};
-</script>