Navbar

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

Hello world

Input

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

Hello world

  • Home
  • News
  • Update
  • Search search

    Type

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

    keyboard_arrow_down

    Type flat

    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.

    Selected Color

    Navbar Color

  • Home
  • News
  • Update
  • Collapse

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

    Hello world

    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