Navbar

Navbar

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Quickly generate a menu with the vs-navbar component, as such the component is divided into 3 slots (left, center (default), right) with which you can determine the location of the elements, as sub components we have vs-navbar-item andvs-navbar-group

You can see a complete example and change the properties in real time Here

child 1
child 2
child 3
Code copied

Color

Change the component's color with the color property or by directly adding one of the main vuesax colors

if you want to change the text color to white you can do it with the property text-white

child 1
child 2
child 3
Code copied

Hide scroll

Add functionality to hide navbar when user scroll down and show when upload

child 1
child 2
child 3
Code copied

Group

You can add a list of elements within an item with the vs-navbar-group component and within it add the vs-navbar-item components

Social
child 1
child 2
child 3
Code copied

Padding Scroll

Add the functionality that the component has a padding up and down that when it is lowered the scroll is eliminated giving a pleasant effect

child 1
child 2
child 3
Code copied

Square

Remove the border-radius property by making the component square

child 1
child 2
child 3
Code copied

Not line

Eliminates the active effect line of the component

child 1
child 2
child 3
Code copied

API

props

Property Type Values Description default Example More
fixed boolean truefalse Defines if the component is fixed on the screen. false Open Close
<vs-navbar fixed>
  ...
</vs-navbar>
shadow boolean truefalse Add a shadow to the component. primary Open Close
<vs-navbar shadow>
  ...
</vs-navbar>
shadowScroll boolean truefalse Add functionality to add shadow to component when scrollTop is more than 0. false Open Close
<vs-navbar shadow-scroll>
  ...
</vs-navbar>
hideScroll boolean truefalse Add the functionality to hide and show the component based on whether the scroll is lowered or raised. false Usage Open Close
<vs-navbar hide-scroll>
  ...
</vs-navbar>
textWhite boolean truefalse Change the text color of items to white. false Usage Open Close
<vs-navbar text-white>
  ...
</vs-navbar>
square boolean truefalse Change the border radius to 0 by making the component square. false Usage Open Close
<vs-navbar square>
  ...
</vs-navbar>
paddingScroll boolean truefalse Determines if the component has padding and the user scrolling is removed making an effect. false Usage Open Close
<vs-navbar padding-scroll>
  ...
</vs-navbar>
notLine boolean truefalse Delete the active line in the component. false Usage Open Close
<vs-navbar not-line>
  ...
</vs-navbar>
leftCollapsed boolean truefalse Add the functionality that when the elements of this slot cannot be correctly they are visually removed. false Usage Open Close
<vs-navbar left-collapsed>
  ...
</vs-navbar>
centerCollapsed boolean truefalse Add the functionality that when the elements of this slot cannot be correctly they are visually removed. false Usage Open Close
<vs-navbar center-collapsed>
  ...
</vs-navbar>
rightCollapsed boolean truefalse Add the functionality that when the elements of this slot cannot be correctly they are visually removed. false Usage Open Close
<vs-navbar right-collapsed>
  ...
</vs-navbar>
targetScroll boolean truefalse Determines the element to which the scroll event will be requested. document Usage Open Close
<vs-navbar padding-scroll="#my-element">
  ...
</vs-navbar>
item:active boolean truefalse Determines if the component is in active status. false Usage Open Close
<vs-navbar-item active>
  ...
</vs-navbar-item>
item:to string url Use vue-router to generate a new view based on the supplied string. false Open Close
<vs-navbar-item to="/">
  ...
</vs-navbar-item>
item:id string id It is the id that is used to change the value of the v-model of the parent component and thus be able to determine the active state based on user interaction.. false Open Close
<vs-navbar-item id="myIdItem">
  ...
</vs-navbar-item>
item:href string url Generate a new tab with the url provided. false Open Close
<vs-navbar-item href="http://vuesax.com/">
  ...
</vs-navbar-item>
item:target string html-target Determine if the tab is a new one or if it replaces the current one. _blank Open Close
<vs-navbar-item target="_self">
  ...
</vs-navbar-item>

slots

Property Type Values Description default Example More
default slot Add the elements in the center of the component. Usage Open Close
<vs-navbar v-model="active">
  <vs-navbar-item :active="active == 'guide'" id="guide">
    Guide
  </vs-navbar-item>
</vs-navbar>
left slot Add the elements on the left side of the component. Usage Open Close
<template #left>
  <img src="/logo2.png" alt="">
</template>
right slot Add the elements on the right side of the component. Usage Open Close
<template #right>
  <vs-button flat >Login</vs-button>
  <vs-button>Get Started</vs-button>
</template>
Last Updated: 6/19/2020, 6:27:15 PM