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

Copy
<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

Copy
<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.

Props

If you want to see more examples and properties please check the official Materilal-UI Documentation.