The top app bar displays information and actions relating to the current screen.

Default - update

To add a navbar we have the component vs-navbar, there is a series of sub components to determine internal elements vs-navbar-title, vs-spacer.

TIP By default the component has a relative position, if necessary it can be changed by means of css the position as for example: > fixed>

Input

You may need an entry in the menu to simply use the vs-input component, for example if you need a search engine.

Type

If you want you can change the style of the buttons and the navbar by changing the property type

Color

You can change the color of the Topbar with the property color. You are able to use the Main Colors or RGB and HEX colors. WARNING Only > RGB and > HEX colors are supported.

Collapse

This property determines if the component starts hidden and with the option of clicking on the menu to open or saw the options.

API

Name Type Parameters Description default
color String primary, success, danger, warning, dark, RGB, HEX Color of the topbar
text-color String primary, success, danger, warning, dark, RGB, HEX Text color items
active-text-color String primary, success, danger, warning, dark, RGB, HEX Text color items active state
index String primary, success, danger, warning, dark, RGB, HEX Determines the value of each item that is reflected in it when selecting v-model
title Slot Space to add the menu title (Functionality for resposive)
collapse Boolean Determines if the component starts in hidden menu mode that can be opened by clicking on the menu false