From 9e072948e7de1cd9e8e7864273fd39980708d57a Mon Sep 17 00:00:00 2001
From: ldrovira <luisdanielrovira8@gmail.com>
Date: Fri, 19 Jun 2020 18:27:15 +0200
Subject: [PATCH] new component navbar

---
 README.md                                     |   4 +-
 .../.vuepress/components/Navbar/color.vue     |   4 +-
 .../.vuepress/components/Navbar/default.vue   |  47 +-
 .../.vuepress/components/Navbar/group.vue     |  97 +++
 .../components/Navbar/hideScroll.vue          |  63 ++
 .../Navbar/{default copy.vue => notLine.vue}  |   9 +-
 .../components/Navbar/paddingScroll.vue       |  63 ++
 .../.vuepress/components/Navbar/square.vue    |  63 ++
 .../docs/.vuepress/components/Table/edit.vue  |   2 +-
 packages/docs/.vuepress/dist                  |   2 +-
 packages/docs/docs/components/Navbar.md       | 718 +++++++++++++++-
 packages/docs/es/docs/components/Navbar.md    | 769 ++++++++++++++++++
 .../components/HeaderNotification.vue         |   6 +-
 .../components/navbarLayout.vue               |   3 +-
 packages/vuesax/package-lock.json             |   2 +-
 packages/vuesax/package.json                  |   2 +-
 .../src/components/vsNavbar/Base/style.sass   |   2 +-
 .../src/components/vsNavbar/Base/vsNavbar.ts  |   5 +-
 .../src/components/vsNavbar/Group/style.sass  |   4 +
 19 files changed, 1797 insertions(+), 68 deletions(-)
 create mode 100644 packages/docs/.vuepress/components/Navbar/group.vue
 create mode 100644 packages/docs/.vuepress/components/Navbar/hideScroll.vue
 rename packages/docs/.vuepress/components/Navbar/{default copy.vue => notLine.vue} (89%)
 create mode 100644 packages/docs/.vuepress/components/Navbar/paddingScroll.vue
 create mode 100644 packages/docs/.vuepress/components/Navbar/square.vue
 create mode 100644 packages/docs/es/docs/components/Navbar.md

diff --git a/README.md b/README.md
index 0e38d0c7..4448bc99 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [x] Input
 - [ ] List
 - [x] Loading
-- [ ] Navbar
+- [x] Navbar
 - [x] Notification
 - [ ] Number Input
 - [x] Pagination
@@ -60,7 +60,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [ ] Sidebar
 - [ ] Slider
 - [x] Switch
-- [ ] Table
+- [x] Table
 - [ ] Tabs
 - [ ] Textarea
 - [x] Tooltip
diff --git a/packages/docs/.vuepress/components/Navbar/color.vue b/packages/docs/.vuepress/components/Navbar/color.vue
index fb11f18e..febcf2d0 100644
--- a/packages/docs/.vuepress/components/Navbar/color.vue
+++ b/packages/docs/.vuepress/components/Navbar/color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="center examplex">
+  <div class="center example-nav">
     <vs-navbar text-white :color="active" center-collapsed v-model="active">
       <template #left>
         <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
@@ -60,7 +60,7 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative
diff --git a/packages/docs/.vuepress/components/Navbar/default.vue b/packages/docs/.vuepress/components/Navbar/default.vue
index fb11f18e..ba9bfa60 100644
--- a/packages/docs/.vuepress/components/Navbar/default.vue
+++ b/packages/docs/.vuepress/components/Navbar/default.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="center examplex">
-    <vs-navbar text-white :color="active" center-collapsed v-model="active">
+  <div class="center example-nav">
+    <vs-navbar center-collapsed v-model="active">
       <template #left>
-        <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
+        <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-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>
+        <vs-button flat >Login</vs-button>
+        <vs-button>Get Started</vs-button>
       </template>
     </vs-navbar>
     <div class="square">
@@ -44,7 +37,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'primary'
+    active: 'guide'
   })
 }
 </script>
@@ -60,10 +53,10 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative
     img
-      max-height 22px
+      max-height 25px
 </style>
diff --git a/packages/docs/.vuepress/components/Navbar/group.vue b/packages/docs/.vuepress/components/Navbar/group.vue
new file mode 100644
index 00000000..6fbb59d9
--- /dev/null
+++ b/packages/docs/.vuepress/components/Navbar/group.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="center example-nav">
+    <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>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .title
+    text-align left
+    margin 0px
+    width 100%
+    padding 5px 6px
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    img
+      max-height 25px
+</style>
diff --git a/packages/docs/.vuepress/components/Navbar/hideScroll.vue b/packages/docs/.vuepress/components/Navbar/hideScroll.vue
new file mode 100644
index 00000000..f8f3b151
--- /dev/null
+++ b/packages/docs/.vuepress/components/Navbar/hideScroll.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="center example-nav">
+    <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>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    overflow hidden
+    img
+      max-height 25px
+</style>
diff --git a/packages/docs/.vuepress/components/Navbar/default copy.vue b/packages/docs/.vuepress/components/Navbar/notLine.vue
similarity index 89%
rename from packages/docs/.vuepress/components/Navbar/default copy.vue
rename to packages/docs/.vuepress/components/Navbar/notLine.vue
index 96c32b0d..dd58d13e 100644
--- a/packages/docs/.vuepress/components/Navbar/default copy.vue	
+++ b/packages/docs/.vuepress/components/Navbar/notLine.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="center examplex">
-    <vs-navbar center-collapsed v-model="active">
+  <div class="center example-nav">
+    <vs-navbar not-line center-collapsed v-model="active">
       <template #left>
         <img src="/logo2.png" alt="">
       </template>
@@ -37,7 +37,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'license'
+    active: 'guide'
   })
 }
 </script>
@@ -53,10 +53,11 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative
+    overflow hidden
     img
       max-height 25px
 </style>
diff --git a/packages/docs/.vuepress/components/Navbar/paddingScroll.vue b/packages/docs/.vuepress/components/Navbar/paddingScroll.vue
new file mode 100644
index 00000000..c6e13ae6
--- /dev/null
+++ b/packages/docs/.vuepress/components/Navbar/paddingScroll.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="center example-nav">
+    <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>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    overflow hidden
+    img
+      max-height 25px
+</style>
diff --git a/packages/docs/.vuepress/components/Navbar/square.vue b/packages/docs/.vuepress/components/Navbar/square.vue
new file mode 100644
index 00000000..921f58e9
--- /dev/null
+++ b/packages/docs/.vuepress/components/Navbar/square.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="center example-nav">
+    <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>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    overflow hidden
+    img
+      max-height 20px
+</style>
diff --git a/packages/docs/.vuepress/components/Table/edit.vue b/packages/docs/.vuepress/components/Table/edit.vue
index 918f4818..20efc183 100644
--- a/packages/docs/.vuepress/components/Table/edit.vue
+++ b/packages/docs/.vuepress/components/Table/edit.vue
@@ -36,7 +36,7 @@
       <template #header>
           Change Prop {{ editProp }}
       </template>
-      <vs-input @keypress.enter="editActive = false" v-if="editProp == 'email'" v-model="edit[editProp]" />
+      <vs-input block @keypress.enter="editActive = false" v-if="editProp == 'email'" v-model="edit[editProp]" />
       <vs-select @change="editActive = false" block v-if="editProp == 'name'" placeholder="Select" v-model="edit[editProp]">
         <vs-option label="Vuesax" value="Vuesax">
           Vuesax
diff --git a/packages/docs/.vuepress/dist b/packages/docs/.vuepress/dist
index f1f557b5..6a46aa1b 160000
--- a/packages/docs/.vuepress/dist
+++ b/packages/docs/.vuepress/dist
@@ -1 +1 @@
-Subproject commit f1f557b59b3ba47e3bb1cdcb2d8cb148c0313718
+Subproject commit 6a46aa1b14cd5ff3d30fbf2d43a77521fcd7fb98
diff --git a/packages/docs/docs/components/Navbar.md b/packages/docs/docs/components/Navbar.md
index c16cf1dc..3ef8f178 100644
--- a/packages/docs/docs/components/Navbar.md
+++ b/packages/docs/docs/components/Navbar.md
@@ -1,25 +1,230 @@
 ---
 PROPS:
-  - name: propiedad
-    type: String
-    values: Valores separados en coma
-    description: texto descriptivo.
+  - name: fixed
+    type: boolean
+    values: true,false
+    description: Defines if the component is fixed on the screen.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar fixed>
+              ...
+            </vs-navbar>
+  - name: shadow
+    type: boolean
+    values: true,false
+    description: Add a shadow to the component.
     default: primary
     link: null
+    usage: null
+    code: >
+            <vs-navbar shadow>
+              ...
+            </vs-navbar>
+  - name: shadowScroll
+    type: boolean
+    values: true,false
+    description: Add functionality to add shadow to component when scrollTop is more than 0.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar shadow-scroll>
+              ...
+            </vs-navbar>
+  - name: hideScroll
+    type: boolean
+    values: true,false
+    description: Add the functionality to hide and show the component based on whether the scroll is lowered or raised.
+    default: false
+    link: null
+    usage: '#hide-scroll'
+    code: >
+            <vs-navbar hide-scroll>
+              ...
+            </vs-navbar>
+  - name: textWhite
+    type: boolean
+    values: true,false
+    description: Change the text color of items to white.
+    default: false
+    link: null
     usage: '#color'
     code: >
-            ...
+            <vs-navbar text-white>
+              ...
+            </vs-navbar>
+  - name: square
+    type: boolean
+    values: true,false
+    description: Change the border radius to 0 by making the component square.
+    default: false
+    link: null
+    usage: '#square'
+    code: >
+            <vs-navbar square>
+              ...
+            </vs-navbar>
+  - name: paddingScroll
+    type: boolean
+    values: true,false
+    description: Determines if the component has padding and the user scrolling is removed making an effect.
+    default: false
+    link: null
+    usage: '#padding-scroll'
+    code: >
+            <vs-navbar padding-scroll>
+              ...
+            </vs-navbar>
+  - name: notLine
+    type: boolean
+    values: true,false
+    description: Delete the active line in the component.
+    default: false
+    link: null
+    usage: '#not-line'
+    code: >
+            <vs-navbar not-line>
+              ...
+            </vs-navbar>
+  - name: leftCollapsed
+    type: boolean
+    values: true,false
+    description: Add the functionality that when the elements of this slot cannot be correctly they are visually removed.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar left-collapsed>
+              ...
+            </vs-navbar>
+  - name: centerCollapsed
+    type: boolean
+    values: true,false
+    description: Add the functionality that when the elements of this slot cannot be correctly they are visually removed.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar center-collapsed>
+              ...
+            </vs-navbar>
+  - name: rightCollapsed
+    type: boolean
+    values: true,false
+    description: Add the functionality that when the elements of this slot cannot be correctly they are visually removed.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar right-collapsed>
+              ...
+            </vs-navbar>
+  - name: targetScroll
+    type: boolean
+    values: true,false
+    description: Determines the element to which the scroll event will be requested.
+    default: document
+    link: null
+    usage: '#padding-scroll'
+    code: >
+            <vs-navbar padding-scroll="#my-element">
+              ...
+            </vs-navbar>
+  - name: item:active
+    type: boolean
+    values: true,false
+    description: Determines if the component is in active status.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar-item active>
+              ...
+            </vs-navbar-item>
+  - name: item:to
+    type: string
+    values: url
+    description: Use vue-router to generate a new view based on the supplied string.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item to="/">
+              ...
+            </vs-navbar-item>
+  - name: item:id
+    type: string
+    values: id
+    description: 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..
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item id="myIdItem">
+              ...
+            </vs-navbar-item>
+  - name: item:href
+    type: string
+    values: url
+    description: Generate a new tab with the url provided.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item href="http://vuesax.com/">
+              ...
+            </vs-navbar-item>
+  - name: item:target
+    type: string
+    values: html-target
+    description: Determine if the tab is a new one or if it replaces the current one.
+    default: '_blank'
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item target="_self">
+              ...
+            </vs-navbar-item>
 
 SLOTS:
-  - name: slot name
+  - name: default
+    type: slot
+    values: null
+    description: Add the elements in the center of the component.
+    default: null
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar v-model="active">
+              <vs-navbar-item :active="active == 'guide'" id="guide">
+                Guide
+              </vs-navbar-item>
+            </vs-navbar>
+  - name: left
+    type: slot
+    values: null
+    description: Add the elements on the left side of the component.
+    default: null
+    link: null
+    usage: '#default'
+    code: >
+            <template #left>
+              <img src="/logo2.png" alt="">
+            </template>
+  - name: right
     type: slot
     values: null
-    description: texto descriptivo.
+    description: Add the elements on the right side of the component.
     default: null
     link: null
-    usage: '#animated'
+    usage: '#default'
     code: >
-            ...
+            <template #right>
+              <vs-button flat >Login</vs-button>
+              <vs-button>Get Started</vs-button>
+            </template>
 
 NEWS:
   - name
@@ -34,7 +239,12 @@ NEWS:
 
 <docs-warn />
 
-genera un menu rápidamente con el componente `vs-navbar`, como tal el componente se divide en 3 slots (**left**, **center**(default), **right**) con los cuales puedes determinar la ubicación de los elementos, como sub componentes tenemos `vs-navbar-item` y `vs-navbar-group`
+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` and` vs-navbar-group`
+
+
+:::tip
+You can see a complete example and change the properties in real time [Here](/examples/navbar.html)
+:::
 
 <div slot="example">
   <Navbar-default />
@@ -42,16 +252,57 @@ genera un menu rápidamente con el componente `vs-navbar`, como tal el component
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html{3}
+    <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>
   ```
 
 </div>
 
 <div slot="script">
 
-  ```html{3,4,5}
-    ...
+  ```html{4}
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
   ```
 
 </div>
@@ -60,26 +311,451 @@ genera un menu rápidamente con el componente `vs-navbar`, como tal el component
 
 <card>
 
-## Otro
+## Color
 
-Descripción
+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`
 
 <div slot="example">
-  <Navbar-default />
+  <Navbar-color />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'primary'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Hide scroll
+
+Add functionality to hide navbar when user scroll down and show when upload
+
+<div slot="example">
+  <Navbar-hideScroll />
+</div>
+
+<div slot="template">
+
+  ```html{3}
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## 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
+
+<div slot="example">
+  <Navbar-group />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## 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
+
+<div slot="example">
+  <Navbar-paddingScroll />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Square
+
+Remove the border-radius property by making the component square
+
+<div slot="example">
+  <Navbar-square />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Not line
+
+Eliminates the active effect line of the component
+
+<div slot="example">
+  <Navbar-notLine />
 </div>
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <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>
   ```
 
 </div>
 
 <div slot="script">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
   ```
 
 </div>
diff --git a/packages/docs/es/docs/components/Navbar.md b/packages/docs/es/docs/components/Navbar.md
new file mode 100644
index 00000000..2f9c6e9c
--- /dev/null
+++ b/packages/docs/es/docs/components/Navbar.md
@@ -0,0 +1,769 @@
+---
+PROPS:
+  - name: fixed
+    type: boolean
+    values: true,false
+    description: Define si el componente esta fijo en la pantalla.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar fixed>
+              ...
+            </vs-navbar>
+  - name: shadow
+    type: boolean
+    values: true,false
+    description: Agrega una sombre al componente.
+    default: primary
+    link: null
+    usage: null
+    code: >
+            <vs-navbar shadow>
+              ...
+            </vs-navbar>
+  - name: shadowScroll
+    type: boolean
+    values: true,false
+    description: Agrega la funcionalidad de agregar shadow al componente cuando el scrollTop es mas de 0.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar shadow-scroll>
+              ...
+            </vs-navbar>
+  - name: hideScroll
+    type: boolean
+    values: true,false
+    description: Agrega la funcionalidad de ocultar y mostrar el componente en base a si se baja o sube el scroll.
+    default: false
+    link: null
+    usage: '#hide-scroll'
+    code: >
+            <vs-navbar hide-scroll>
+              ...
+            </vs-navbar>
+  - name: textWhite
+    type: boolean
+    values: true,false
+    description: Cambia el color de texto de los items a blanco.
+    default: false
+    link: null
+    usage: '#color'
+    code: >
+            <vs-navbar text-white>
+              ...
+            </vs-navbar>
+  - name: square
+    type: boolean
+    values: true,false
+    description: Cambia el border radius a 0 haciendo el componente cuadrado.
+    default: false
+    link: null
+    usage: '#square'
+    code: >
+            <vs-navbar square>
+              ...
+            </vs-navbar>
+  - name: paddingScroll
+    type: boolean
+    values: true,false
+    description: determina si el componente tiene padding y al usuario hacer scroll se elimina haciendo un efecto.
+    default: false
+    link: null
+    usage: '#padding-scroll'
+    code: >
+            <vs-navbar padding-scroll>
+              ...
+            </vs-navbar>
+  - name: notLine
+    type: boolean
+    values: true,false
+    description: Elimina la linea de active en el componente.
+    default: false
+    link: null
+    usage: '#not-line'
+    code: >
+            <vs-navbar not-line>
+              ...
+            </vs-navbar>
+  - name: leftCollapsed
+    type: boolean
+    values: true,false
+    description: Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar left-collapsed>
+              ...
+            </vs-navbar>
+  - name: centerCollapsed
+    type: boolean
+    values: true,false
+    description: Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar center-collapsed>
+              ...
+            </vs-navbar>
+  - name: rightCollapsed
+    type: boolean
+    values: true,false
+    description: Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar right-collapsed>
+              ...
+            </vs-navbar>
+  - name: targetScroll
+    type: boolean
+    values: true,false
+    description: Determina el elemento al que se le va a solicitar el evento scroll.
+    default: document
+    link: null
+    usage: '#padding-scroll'
+    code: >
+            <vs-navbar padding-scroll="#my-element">
+              ...
+            </vs-navbar>
+  - name: item:active
+    type: boolean
+    values: true,false
+    description: determina si el componente esta en estado de activo.
+    default: false
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar-item active>
+              ...
+            </vs-navbar-item>
+  - name: item:to
+    type: string
+    values: url
+    description: Usa vue-router para generar una nueva vista en base al string proporcionado.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item to="/">
+              ...
+            </vs-navbar-item>
+  - name: item:id
+    type: string
+    values: id
+    description: Es el id que se usa para cambiar el valor de el v-model de el componente padre y asi poder determinar el estado de active en base a la interacción de el usuario.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item id="myIdItem">
+              ...
+            </vs-navbar-item>
+  - name: item:href
+    type: string
+    values: url
+    description: Genera una nueva pestaña con la url proporcionada.
+    default: false
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item href="http://vuesax.com/">
+              ...
+            </vs-navbar-item>
+  - name: item:target
+    type: string
+    values: html-target
+    description: Determina si la pestaña es una nueva o si remplaza la actual.
+    default: '_blank'
+    link: null
+    usage: null
+    code: >
+            <vs-navbar-item target="_self">
+              ...
+            </vs-navbar-item>
+
+SLOTS:
+  - name: default
+    type: slot
+    values: null
+    description: Agrega los elementos en el centro de el componente.
+    default: null
+    link: null
+    usage: '#default'
+    code: >
+            <vs-navbar v-model="active">
+              <vs-navbar-item :active="active == 'guide'" id="guide">
+                Guide
+              </vs-navbar-item>
+            </vs-navbar>
+  - name: left
+    type: slot
+    values: null
+    description: Agrega los elementos en la parte izquierda de el componente.
+    default: null
+    link: null
+    usage: '#default'
+    code: >
+            <template #left>
+              <img src="/logo2.png" alt="">
+            </template>
+  - name: right
+    type: slot
+    values: null
+    description: Agrega los elementos en la parte derecha de el componente.
+    default: null
+    link: null
+    usage: '#default'
+    code: >
+            <template #right>
+              <vs-button flat >Login</vs-button>
+              <vs-button>Get Started</vs-button>
+            </template>
+
+NEWS:
+  - name
+---
+
+# Navbar
+
+<card>
+
+## Default
+
+
+<docs-warn />
+
+genera un menu rápidamente con el componente `vs-navbar`, como tal el componente se divide en 3 slots (**left**, **center**(default), **right**) con los cuales puedes determinar la ubicación de los elementos, como sub componentes tenemos `vs-navbar-item` y `vs-navbar-group`
+
+
+:::tip
+Puedes ver un ejemplo completo y cambiar las propiedades en tiempo real [Aqui](/examples/navbar.html)
+:::
+
+<div slot="example">
+  <Navbar-default />
+</div>
+
+<div slot="template">
+
+  ```html{3}
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html{4}
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Color
+
+Cambia el color de el componente con la propiedad `color` o agregando directamente uno de los colores principales de vuesax
+
+si quieres cambiar el color de texto a blanco puedes hacerlo con la propiedad `text-white`
+
+<div slot="example">
+  <Navbar-color />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'primary'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Hide scroll
+
+Agrega la funcionalidad de ocultar el navbar cuando el usuario hace scroll hacia abajo y de mostrar cuando sube
+
+<div slot="example">
+  <Navbar-hideScroll />
+</div>
+
+<div slot="template">
+
+  ```html{3}
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Group
+
+Puedes agregar una lista de elementos dentro de un item con el componente `vs-navbar-group` y dentro de el agregar los componentes `vs-navbar-item`
+
+<div slot="example">
+  <Navbar-group />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Padding Scroll
+
+Agrega la funcionalidad de que el componente tiene un padding arriba y abajo que cuando se baja el scroll se elimina dando un efecto agradable
+
+<div slot="example">
+  <Navbar-paddingScroll />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Square
+
+Elimina la propiedad border-radius haciendo el componente cuadrado
+
+<div slot="example">
+  <Navbar-square />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## Not line
+
+Elimina la linea de efecto active de el componente
+
+<div slot="example">
+  <Navbar-notLine />
+</div>
+
+<div slot="template">
+
+  ```html
+    <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>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+    export default {
+      data:() => ({
+        active: 'guide'
+      })
+    }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
+## API
+
+</card>
diff --git a/packages/vuepress-theme-vuesax/components/HeaderNotification.vue b/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
index 144ac46b..9737d501 100644
--- a/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
+++ b/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
@@ -10,7 +10,7 @@
       </div>
       <div class="text-n">
         <h3>
-          New component <b>Data Table</b> 🎉
+          New component <b>Navbar</b> 🎉
         </h3>
         <p>
           See the examples and the new documentation
@@ -36,11 +36,11 @@
 export default {
   data:() => ({
     active: 0,
-    number: 9
+    number: 10
   }),
   methods: {
     handleClick() {
-      this.$router.push('/docs/components/Table')
+      this.$router.push('/docs/components/Navbar')
       this.active = 0
 
       localStorage.notificationHidden = this.number
diff --git a/packages/vuepress-theme-vuesax/components/navbarLayout.vue b/packages/vuepress-theme-vuesax/components/navbarLayout.vue
index 7ad65391..84cd84d1 100644
--- a/packages/vuepress-theme-vuesax/components/navbarLayout.vue
+++ b/packages/vuepress-theme-vuesax/components/navbarLayout.vue
@@ -150,7 +150,8 @@ export default {
     justify-content center
     font-weight bold
     flex-direction column
-    background rgb(245,245,245)
+    background #F4F7F8
+    // background rgb(245,245,245)
     h2
       font-size 2rem
     .con-colors
diff --git a/packages/vuesax/package-lock.json b/packages/vuesax/package-lock.json
index fe03f55e..a3a8d665 100644
--- a/packages/vuesax/package-lock.json
+++ b/packages/vuesax/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vuesax",
-  "version": "4.0.1-alpha.20",
+  "version": "4.0.1-alpha.21",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/vuesax/package.json b/packages/vuesax/package.json
index 32f23b2d..c2eafd37 100644
--- a/packages/vuesax/package.json
+++ b/packages/vuesax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuesax",
-  "version": "4.0.1-alpha.20",
+  "version": "4.0.1-alpha.21",
   "description": "Framework components for vuejs",
   "main": "dist/vuesax.js",
   "scripts": {
diff --git a/packages/vuesax/src/components/vsNavbar/Base/style.sass b/packages/vuesax/src/components/vsNavbar/Base/style.sass
index 2b23a399..398547d9 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Base/style.sass
@@ -17,7 +17,7 @@
     padding-bottom: 20px
     .vs-navbar__group__items
       margin-bottom: -30px
-  &.square
+  &.vsNavbarSquare
     border-radius: 0px
   &.textWhite
     color: #fff
diff --git a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
index b334da57..ce24a8ea 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
+++ b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
@@ -5,7 +5,6 @@ import VsComponent from '../../../mixins/component'
 @Component
 export default class VsNavbar extends VsComponent {
 
-  @Prop({ default: false, type: Boolean }) loading: boolean
   @Prop({ default: false, type: Boolean }) fixed: boolean
   @Prop({ default: false, type: Boolean }) shadow: boolean
   @Prop({ default: false, type: Boolean }) shadowScroll: boolean
@@ -193,9 +192,9 @@ export default class VsNavbar extends VsComponent {
         hidden: this.hidden,
         shadowActive: this.shadowActive,
         textWhite: this.textWhite,
-        square: this.square,
         paddingScroll: this.paddingScroll,
-        paddingScrollActive: this.paddingScrollActive
+        paddingScrollActive: this.paddingScrollActive,
+        vsNavbarSquare: this.square,
       }
     }, [
       navbar,
diff --git a/packages/vuesax/src/components/vsNavbar/Group/style.sass b/packages/vuesax/src/components/vsNavbar/Group/style.sass
index 2b070f16..ad35368f 100644
--- a/packages/vuesax/src/components/vsNavbar/Group/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Group/style.sass
@@ -2,6 +2,8 @@
 .vs-navbar__group
   position: relative
   &:hover
+    .vs-navbar__group__item
+      opacity: 1
     .vs-navbar__group__items
       opacity: 1
       visibility: visible
@@ -12,6 +14,7 @@
     color: inherit
     font-weight: bold
     transition: all .25s ease, color 0s
+    opacity: .7
   &__items
     position: absolute
     bottom: 0px
@@ -44,6 +47,7 @@
       text-align: left
       width: 100%
       position: relative
+      padding: 5px 10px
       &:before
         content: ''
         left: 0px