BootstrapVue — Navbar

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 navbars to our app.

Navbar

The b-navbar component lets us add a navbar with branding.

For instance, we can write:

<template>  
  <div id="app">  
    <b-navbar toggleable="lg" type="dark" variant="info">  
      <b-navbar-brand href="#">brand</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>  
        <b-navbar-nav>  
          <b-nav-item href="#">foo</b-nav-item>  
          <b-nav-item href="#" disabled>bar</b-nav-item>  
        </b-navbar-nav>  
      </b-collapse>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have a navbar that we added with the b-navbar component.

b-collapse lets us add links that are responsive.

So they’ll be condensed into a hamburger menu if we have a small screen.

b-nav-item is the nav item.

The toggleable prop is for setting the breakpoint for which the navbar will expand from a menu to the full navbar.

variant is the styling variant.

type is the text color style.

Dropdowns

We can add dropdowns to a navbar.

We use the b-nav-item-dropdown and b-dropdown-item to do that:

<template>  
  <div id="app">  
    <b-navbar toggleable="lg" type="dark" variant="info">  
      <b-navbar-nav class="ml-auto">  
        <b-nav-item-dropdown text="Menu" right>  
          <b-dropdown-item href="#">foo</b-dropdown-item>  
          <b-dropdown-item href="#">bar</b-dropdown-item>  
        </b-nav-item-dropdown>  
      </b-navbar-nav>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have a menu that has a dropdown inside it.

It’s responsive so it’ll fit on any screen.

The right prop aligns the dropdown to the right.

Customizing Dropdown Button

We can customize the dropdown button with slots.

For instance, we can populate the button-content slot to add our own content:

<template>  
  <div id="app">  
    <b-navbar toggleable="lg" type="dark" variant="info">  
      <b-navbar-nav class="ml-auto">  
        <b-nav-item-dropdown right>            
          <template v-slot:button-content>  
            <strong>foo</strong>  
          </template>  
          <b-dropdown-item href="#">bar</b-dropdown-item>  
          <b-dropdown-item href="#">baz</b-dropdown-item>  
        </b-nav-item-dropdown>  
      </b-navbar-nav>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Now the dropdown button is bold.

Inline Form

We can add the inline form.

For example, we can write:

<template>  
  <div id="app">  
    <b-navbar toggleable="lg" type="dark" variant="info">  
      <b-navbar-nav class="ml-auto">  
        <b-nav-form>  
          <b-form-input size="sm" class="mr-sm-2" placeholder="Input"></b-form-input>  
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Submit</b-button>  
        </b-nav-form>  
      </b-navbar-nav>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have the b-navbar-nav which houses the b-nav-form .

Inside it, we have the b-form-input inside the form.

b-navbar-brand

The brand is added to the top left of the navbar.

For example, we can write:

<template>  
  <div id="app">  
    <b-navbar variant="faded" type="light">  
      <b-navbar-brand href="#">Brand</b-navbar-brand>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have changed the style variant with variant and the text color with type.

We can also add images:

<template>  
  <div id="app">  
    <b-navbar>  
      <b-navbar-brand href="#">  
        <img src="https://placekitten.com/30/30" alt="cat">  
      </b-navbar-brand>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We added an img element into the b-navbar-brand .

We’ve to make sure the image fits properly in the nav with our own styles.

Custom Navbar Toggle

To customize the navbar toggle, we can use the b-navbar-toggle component.

For instance, we can write:

<template>  
  <div id="app">  
    <b-navbar toggleable >  
      <b-navbar-brand href="#">brand</b-navbar-brand>

      <b-navbar-toggle target="navbar-toggle-collapse">  
        <template v-slot:default="{ expanded }">  
          <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>  
          <b-icon v-else icon="chevron-bar-down"></b-icon>  
        </template>  
      </b-navbar-toggle>

      <b-collapse id="navbar-toggle-collapse" is-nav>  
        <b-navbar-nav class="ml-auto">  
          <b-nav-item href="#">foo</b-nav-item>  
          <b-nav-item href="#">bar</b-nav-item>  
        </b-navbar-nav>  
      </b-collapse>  
    </b-navbar>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have the b-navbar-toggle component to custom the toggle.

The default slot is populated so that we can customize it.

Conclusion

We can create a navbar with various customizations.

Menus, forms, and links can be added.