BootstrapVue — More Complex Navigation

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add navigation components.

Inline Forms

The b-nav-form lets us add forms into the navbar.

For example, we can write:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-form @submit.stop.prevent="submit">
        <b-form-input></b-form-input>
        <b-button type="submit">Ok</b-button>
      </b-nav-form>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    submit(){
      alert('success')
    }
  }
};
</script>

We have the b-form-input inside the b-nav-form .

We can call a submit handler by setting the submit event handler on the b-nav-form .

Card Integration

We can add a navbar inside a card.

For instance, we can write:

<template>
  <div id="app">
    <b-card title="Card Title" no-body>
      <b-card-header header-tag="nav">
        <b-nav card-header tabs>
          <b-nav-item active>foo</b-nav-item>
          <b-nav-item>bar</b-nav-item>
          <b-nav-item disabled>baz</b-nav-item>
        </b-nav>
      </b-card-header>

      <b-card-body class="text-center">
        <b-card-text>Content.</b-card-text>

        <b-button variant="primary">Do Something</b-button>
      </b-card-body>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We just put the b-nav inside the b-card-header .

Then we add the card-header prop to make it fit inside the card header.

tabs makes it show up as tabs.

Alternatively, we can change it to the pills style:

<template>
  <div id="app">
    <b-card title="Card Title" no-body>
      <b-card-header header-tag="nav">
        <b-nav card-header pills>
          <b-nav-item active>foo</b-nav-item>
          <b-nav-item>bar</b-nav-item>
          <b-nav-item disabled>baz</b-nav-item>
        </b-nav>
      </b-card-header>

      <b-card-body class="text-center">
        <b-card-text>Content.</b-card-text>

        <b-button variant="primary">Do Something</b-button>
      </b-card-body>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We can also remove the card-header prop if we want a plain style navbar:

<template>
  <div id="app">
    <b-card title="Card Title" no-body>
      <b-card-header header-tag="nav">
        <b-nav>
          <b-nav-item active>foo</b-nav-item>
          <b-nav-item>bar</b-nav-item>
          <b-nav-item disabled>baz</b-nav-item>
        </b-nav>
      </b-card-header>

      <b-card-body class="text-center">
        <b-card-text>Content.</b-card-text>

        <b-button variant="primary">Do Something</b-button>
      </b-card-body>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Use with Vue Router

We can use nav with Vue Router. To do this, we have to define a parent route and a set of child routes.

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import VueRouter from "vue-router";
import Foo from "./components/Foo";
import Bar from "./components/Bar";
import Root from "./components/Root";

const routes = [
  {
    path: "/",
    component: Root,
    children: [
      {
        path: "foo",
        component: Foo
      },
      {
        path: "bar",
        component: Bar
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

We added the VueRouter plugin and the routes.

We have to have a parent route for the nav and child routes for displaying the content in the route.

The child routes are in the children prop.

Then we add:

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

This is the parent router-view .

Then we add our nav and child router-view :

components/Root.vue

<template>
  <div id="app">
    <b-card title="Card Title" no-body>
      <b-card-header header-tag="nav">
        <b-nav>
          <b-nav-item to="/foo" exact exact-active-class="active">foo</b-nav-item>
          <b-nav-item to="/bar" exact exact-active-class="active">bar</b-nav-item>
        </b-nav>
      </b-card-header>

      <b-card-body class="text-center">
        <router-view></router-view>
      </b-card-body>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have b-nav-item with the to prop. And we have the exact prop to match the route exactly.

exact-active-class is a CSS class that’s applied when the route is navigated to.

Then we add our child routes:

component/Foo.vue :

<template>
  <p>foo</p>
</template>

<script>
export default {};
</script>

component/Bar.vue :

<template>
  <p>bar</p>
</template>

<script>
export default {};
</script>

Conclusion

We can add various things to our nav like inline forms.

Also, we can put the nav in cards.

It also integrates with Vue Router so we can navigate to routes with navs.