BootstrapVue Navbar

A BootstrapVue Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">. Check this documentation and examples for BootstrapVue’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.


Example

<div>
  <b-navbar toggleable="lg" type="dark" variant="default" class="navbar-horizontal">
    <b-navbar-brand href="#">DEFAULT COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <i class="ni ni-favourite-28"></i>
                    <span class="nav-link-inner--text d-lg-none">Discover</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <i class="ni ni-notification-70"></i>
                    <span class="nav-link-inner--text d-lg-none">Profile</span>
                </a>
            </li>
            <b-nav-item-dropdown right>
              <template v-slot:button-content>
                <i class="ni ni-settings-gear-65"></i>
                <span class="nav-link-inner--text d-lg-none">Settings</span>
              </template>
              <b-dropdown-item href="#">Action</b-dropdown-item>
              <b-dropdown-item href="#">Another action</b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
              <b-dropdown-item href="#">Something else here</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

Variations

<div>
  <b-navbar toggleable="lg" type="dark" variant="primary" class="navbar-horizontal">
    <b-navbar-brand href="#">PRIMARY COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <span class="nav-link nav-link-inner--text">Discover</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <span class="nav-link nav-link-inner--text">Profile</span>
                </a>
            </li>
            <b-nav-item-dropdown right>
              <template v-slot:button-content>
                <span class="nav-link-inner--text">Settings</span>
              </template>
              <b-dropdown-item href="#">Action</b-dropdown-item>
              <b-dropdown-item href="#">Another action</b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
              <b-dropdown-item href="#">Something else here</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <br><br>
  <b-navbar toggleable="lg" type="dark" variant="success" class="navbar-horizontal">
    <b-navbar-brand href="#">SUCCESS COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <i class="nav-link ni ni-favourite-28"></i>
                    <span class="nav-link-inner--text d-lg-none">Discover</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-icon" href="#">
                    <i class="nav-link ni ni-planet"></i>
                    <span class="nav-link-inner--text d-lg-none">Profile</span>
                </a>
            </li>
            <b-nav-item-dropdown right>
              <template v-slot:button-content>
                <i class="ni ni-settings-gear-65"></i>
                <span class="nav-link-inner--text d-lg-none">Settings</span>
              </template>
              <b-dropdown-item href="#">Action</b-dropdown-item>
              <b-dropdown-item href="#">Another action</b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
              <b-dropdown-item href="#">Something else here</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <br><br>
  <b-navbar toggleable="lg" type="dark" variant="danger" class="navbar-horizontal">
    <b-navbar-brand href="#">DANGER COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-facebook-square"></i>
                  <span class="nav-link-inner--text d-lg-none">Facebook</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-twitter"></i>
                  <span class="nav-link-inner--text d-lg-none">Twitter</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-google-plus"></i>
                  <span class="nav-link-inner--text d-lg-none">Google +</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-instagram"></i>
                  <span class="nav-link-inner--text d-lg-none">Instagram</span>
              </a>
          </li>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <br><br>
  <b-navbar toggleable="lg" type="dark" variant="warning" class="navbar-horizontal">
    <b-navbar-brand href="#">WARNING COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-facebook-square"></i>
                  <span class="nav-link-inner--text d-lg-none">Facebook</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-twitter"></i>
                  <span class="nav-link-inner--text d-lg-none">Twitter</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-pinterest"></i>
                  <span class="nav-link-inner--text d-lg-none">Pinterest</span>
              </a>
          </li>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <br><br>
  <b-navbar toggleable="lg" type="dark" variant="info" class="navbar-horizontal">
    <b-navbar-brand href="#">INFO COLOR</b-navbar-brand>

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

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-facebook-square"></i>
                  <span class="nav-link-inner--text">Facebook</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-twitter"></i>
                  <span class="nav-link-inner--text">Twitter</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link nav-link-icon" href="#">
                  <i class="fab fa-instagram"></i>
                  <span class="nav-link-inner--text">Instagram</span>
              </a>
          </li>
        </b-nav-form>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

Base Nav props

PROP NAME TYPE DEFAULT DESCRIPTION
show Boolean N/A Whether navbar menu is shown (valid for viewports < specified by expand prop)
transparent Boolean N/A Whether navbar is transparent
expand String lg Breakpoint where nav should expand
menuClasses String / Object / Array N/A Navbar menu (items) classes. Can be used to align menu items to the right/left
containerClasses String / Object / Array container Container classes. Can be used to control container classes (contains both navbar brand and menu items)
type String N/A Navbar color type

If you want to see more examples and properties please check the official BootstrapVue Documentation.