BootstrapVue — 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.

Navs

BootstrapVue comes with a b-nav component to let us add a navigation bar to our app.

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-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-nav component, which has b-nav-item components inside.

The active prop makes a nav item active.

disabled makes it grayed out and not clickable.

Tab Style

We can add the tabs prop to make the navbar look like tabs.

For instance, we can write:

<template>
  <div id="app">
    <b-nav 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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Now the active tab has lines surrounding it.

The rest is the same.

Pill Style

The pills prop makes the nav items look like buttons.

For example, we can write:

<template>
  <div id="app">
    <b-nav 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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Small Size

We can make the nav items smaller than the default with the small prop:

<template>
  <div id="app">
    <b-nav small>
      <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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Fill

The fill prop makes the nav extends to its full width:

<template>
  <div id="app">
    <b-nav fill>
      <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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Justified

The justified prop lets us make nav items equal width and the nav occur al horizontal space:

<template>
  <div id="app">
    <b-nav justified>
      <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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Alignment

We can add the align prop to align the nav items the way we like.

The value can be left , center , or right .

For example, we can write:

<template>
  <div id="app">
    <b-nav align="right">
      <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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Since we set align to 'right' , we have the nav items on the right.

Vertical Variation

The navbar can be made vertical with the vertical prop:

<template>
  <div id="app">
    <b-nav vertical>
      <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>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Dropdowns

We can add dropdowns into the navbar.

To do that, we use the b-nav-item-dropdown component:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item-dropdown text="fruit" toggle-class="nav-link-custom" right>
        <b-dropdown-item>apple</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item>banana</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We just put the b-nav-item-dropdown component into the b-nav and we get a dropdown displayed.

Text Content

We can add text content to a navbar with the b-nav-text component:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-text>text</b-nav-text>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Conclusion

We can add navbars to an app with the b-nav component.

The b-nav-item is an item that’s shown inside the navbar.

We can also add dropdown and forms inside the navbar.