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

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar center-collapsed v-model="active">
        <template #left>
          <img src="/logo2.png" alt="">
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button flat >Login</vs-button>
          <vs-button>Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar text-white :color="active" center-collapsed v-model="active">
        <template #left>
          <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
        </template>
        <template #right>
          <vs-navbar-item :active="active == 'primary'" id="primary">
            Primary
          </vs-navbar-item>
          <vs-navbar-item :active="active == 'success'" id="success">
            Success
          </vs-navbar-item>
          <vs-navbar-item :active="active == 'danger'" id="danger">
            Danger
          </vs-navbar-item>
          <vs-navbar-item :active="active == 'warn'" id="warn">
            Warn
          </vs-navbar-item>
          <vs-navbar-item :active="active == 'dark'" id="dark">
            Dark
          </vs-navbar-item>
          <vs-navbar-item :active="active == '#7d33ff'" id="#7d33ff">
            HEX
          </vs-navbar-item>
          <vs-navbar-item :active="active == 'rgb(59,222,200)'" id="rgb(59,222,200)">
            RGB
          </vs-navbar-item>
        </template>
      </vs-navbar>
      <div class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

Hide scroll

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

child 1

child 2

child 3

Code copied

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar target-scroll="#hide-scroll-content" hide-scroll center-collapsed v-model="active">
        <template #left>
          <img src="/logo2.png" alt="">
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button flat >Login</vs-button>
          <vs-button>Get Started</vs-button>
        </template>
      </vs-navbar>
      <div id="hide-scroll-content" class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar center-collapsed v-model="active">
        <template #left>
          <img src="/logo2.png" alt="">
        </template>
        <vs-navbar-group>
          Docs
          <template #items>
            <vs-navbar-item :active="active == 'guide'" id="guide">
              Guide
            </vs-navbar-item>
            <vs-navbar-item :active="active == 'docs'" id="docs">
              Documents
            </vs-navbar-item>
            <vs-navbar-item :active="active == 'components'" id="components">
              Components
            </vs-navbar-item>
          </template>
        </vs-navbar-group>

        <vs-navbar-group>
          Ecosystem

          <template #items>
            <h5 class="title">
              Social
            </h5>

            <vs-navbar-item :active="active == 'Github'" id="Github">
              Github
            </vs-navbar-item>
            <vs-navbar-item :active="active == 'Discord'" id="Discord">
              Discord
            </vs-navbar-item>
            <vs-navbar-item :active="active == 'Twitter'" id="Twitter">
              Twitter
            </vs-navbar-item>
            <vs-navbar-item :active="active == 'Medium'" id="Medium">
              Medium
            </vs-navbar-item>
          </template>
        </vs-navbar-group>

        <vs-navbar-item :active="active == 'License'" id="License">
          License
        </vs-navbar-item>

        <template #right>
          <vs-button flat >Login</vs-button>
          <vs-button>Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar target-scroll="#padding-scroll-content" padding-scroll center-collapsed v-model="active">
        <template #left>
          <img src="/logo2.png" alt="">
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button flat >Login</vs-button>
          <vs-button>Get Started</vs-button>
        </template>
      </vs-navbar>
      <div id="padding-scroll-content" class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

Square

Remove the border-radius property by making the component square

child 1

child 2

child 3

Code copied

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-navbar color="#7d33ff" text-white square center-collapsed v-model="active">
        <template #left>
          <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button color="#fff" flat >Login</vs-button>
          <vs-button color="#fff" border >Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

Not line

Eliminates the active effect line of the component

child 1

child 2

child 3

Code copied

• Template
• Script
• All

  <template>
    <div class="center example-nav">
      <vs-navbar not-line center-collapsed v-model="active">
        <template #left>
          <img src="/logo2.png" alt="">
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button flat >Login</vs-button>
          <vs-button>Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        <div class="child">
          child 1
        </div>
        <div class="child">
          child 2
        </div>
        <div class="child">
          child 3
        </div>
      </div>
    </div>
  </template>

API