Navbar 🔗

Navbars are responsive meta components that serve as navigation headers for your application or site.

Example 🔗

Contents in collapse slot can be collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <template slot="collapse">
    <navbar-nav>
      <li class="active"><a role="button">Link <span class="sr-only">(current)</span></a></li>
      <li><a role="button">Link</a></li>
    </navbar-nav>
    <navbar-form left>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <btn>Submit</btn>
    </navbar-form>
    <navbar-nav right>
      <li><a role="button">Link</a></li>
      <dropdown tag="li">
        <a class="dropdown-toggle" role="button">Dropdown <span class="caret"></span></a>
        <template slot="dropdown">
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </dropdown>
    </navbar-nav>
  </template>
</navbar>
<!-- navbar-example.vue -->

Brand image 🔗

Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">
    <img alt="Brand" style="height: 100%; width: auto" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC">
  </a>
</navbar>
<!-- navbar-image.vue -->

Forms 🔗

Place form content within <navbar-form> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment props left / right to decide where it resides within the navbar content.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <navbar-form left>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <btn>Submit</btn>
  </navbar-form>
</navbar>
<!-- navbar-form.vue -->

Buttons 🔗

Add the .navbar-btn class to <btn> that not residing in a <navbar-form> to vertically center them in the navbar.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <btn class="navbar-btn">Sign in</btn>
</navbar>
<!-- navbar-button.vue -->

Text 🔗

Wrap strings of text in <navbar-text> tag for proper leading and color.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <navbar-text>Signed in as wxsm</navbar-text>
</navbar>
<!-- navbar-text.vue -->

Non-nav links 🔗

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

<navbar>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <template slot="collapse">
    <navbar-text right>Signed in as <a href="#" class="navbar-link">wxsm</a></navbar-text>
  </template>
</navbar>
<!-- navbar-links.vue -->

Fixed navbar 🔗

Add fixed-top / fixed-bottom to make navbar fixed.

<navbar fixed-top>
  ...
</navbar>

Note that the fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

Static top 🔗

Create a full-width navbar that scrolls away with the page by adding static-top prop.

Unlike fixed navbars, you do not need to change any padding on the body.

<navbar static-top>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
</navbar>
<!-- navbar-static-top.vue -->

Inverted navbar 🔗

Modify the look of the navbar by adding inverse prop.

<navbar inverse>
  <a class="navbar-brand" slot="brand" href="#">Brand</a>
  <template slot="collapse">
    <navbar-nav>
      <li class="active"><a role="button">Link <span class="sr-only">(current)</span></a></li>
      <li><a role="button">Link</a></li>
    </navbar-nav>
  </template>
</navbar>
<!-- navbar-inverse.vue -->

API Reference 🔗

Navbar 🔗

Props 🔗

Slots 🔗

NavbarNav 🔗

Props 🔗

NavbarForm 🔗

Props 🔗

NavbarText 🔗

Props 🔗