# Navbars

We restyled the classic Bootstrap Navbar.

To use the navbar, first import it: 
import {Navbar} from 'src/components'
1

Global usage

Vue.component(Navbar)
1

Local usage

export default {
 components: {
   Navbar
 }
}
1
2
3
4
5

# Primary navbar

:::tip showMenu property applies only on small viewport (mobile). Shrink the browser to see that in action :::

<template>
  <navbar type="primary" menu-classes="ml-auto" class="z-index-high">
    <template slot-scope="{toggle, isToggled}">
      <div class="navbar-translate">
        <a href="#">Navbar</a>
        <navbar-toggle-button @click.native="toggle"></navbar-toggle-button>
      </div>
    </template>
    <template slot="navbar-menu">
      <li class="nav-item">
        <a class="nav-link" href="#pablo"><i class="now-ui-icons ui-1_send"
          aria-hidden="true"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pablo"><i class="now-ui-icons users_single-02"
          aria-hidden="true"></i></a>
      </li>
    </template>
  </navbar>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

:::tip You can change navbar color with the type prop. :::

# Colored navbars

<template>
  <navbar v-for="type in types" :key="type"
          :type="type"
          :transparent="false"
          position="relative">
       <a class="navbar-brand" href="#">{{type}}</a>
   </navbar>
</template>

<script>
  export default {
    data(){
      return {
        types: ['white', 'default', 'primary', 'danger', 'success', 'warning', 'info']
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Name Description
default Navbar left side content (brand and toggle button )
navbar-menu Content of the navbar (right on desktop, dropdown menu on mobile)

← Nucleo Icons →