Skip to content
On this page

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.

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-brand" href="#">Brand</a>
    </template>
    <template #collapse>
      <NavbarNav>
        <li class="active">
          <a role="button">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a role="button">Link</a></li>
      </NavbarNav>
      <NavbarForm left>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" />
        </div>
        <Btn>Submit</Btn>
      </NavbarForm>
      <NavbarNav right>
        <li><a role="button">Link</a></li>
        <Dropdown tag="li">
          <a class="dropdown-toggle" role="button"
            >Dropdown <span class="caret"></span
          ></a>
          <template #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>
      </NavbarNav>
    </template>
  </Navbar>
</template>

<script setup>
import { Navbar, NavbarNav, Dropdown, NavbarForm, Btn } from 'uiv';
</script>

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.

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-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>
    </template>
  </Navbar>
</template>

<script setup>
import { Navbar } from 'uiv';
</script>

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.

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-brand" href="#">Brand</a>
    </template>
    <NavbarForm left>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" />
      </div>
      <Btn>Submit</Btn>
    </NavbarForm>
  </Navbar>
</template>

<script setup>
import { Navbar, NavbarForm, Btn } from 'uiv';
</script>

Buttons

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

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-brand" href="#">Brand</a>
    </template>
    <Btn class="navbar-btn">Sign in</Btn>
  </Navbar>
</template>

<script setup>
import { Navbar, Btn } from 'uiv';
</script>

Text

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

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-brand" href="#">Brand</a>
    </template>
    <NavbarText>Signed in as wxsm</NavbarText>
  </Navbar>
</template>

<script setup>
import { Navbar, NavbarText } from 'uiv';
</script>

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.

vue
<template>
  <Navbar>
    <template #brand>
      <a class="navbar-brand" href="#">Brand</a>
    </template>
    <template #collapse>
      <NavbarText right
        >Signed in as <a href="#" class="navbar-link">wxsm</a></NavbarText
      >
    </template>
  </Navbar>
</template>

<script setup>
import { Navbar, NavbarText } from 'uiv';
</script>

Fixed navbar

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

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

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

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

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

<script setup>
import { Navbar, NavbarNav } from 'uiv';
</script>

API Reference

Props

NameTypeDefaultRequiredDescription
v-modelBooleanIndicate the collapse status of navbar.
fluidBooleantrueUse .container-fluid class in navbar container, .container otherwise.
fixed-topBooleanfalseApply fixed top style.
fixed-bottomBooleanfalseApply fixed bottom style.
static-topBooleanfalseApply static top style.
inverseBooleanfalseApply inverse style.

Slots

NameDescription
defaultThe navbar body (non-collapsable part).
collapseThe navbar body (collapsable part).
brandThe navbar brand.
collapse-btnUse this slot to override the default collapse button.

Props

NameTypeDefaultRequiredDescription
leftBooleanfalsePull content to left.
rightBooleanfalsePull content to right.

Props

NameTypeDefaultRequiredDescription
leftBooleanfalsePull content to left.
rightBooleanfalsePull content to right.

Props

NameTypeDefaultRequiredDescription
leftBooleanfalsePull content to left.
rightBooleanfalsePull content to right.

Released under the MIT License.