coreui
diff --git a/‎src/components/nav/CNav.vue
Lines changed: 17 additions & 19 deletions b/‎src/components/nav/CNav.vue
Lines changed: 17 additions & 19 deletions
diff --git a/‎src/components/nav/CNavItem.vue
Lines changed: 4 additions & 3 deletions b/‎src/components/nav/CNavItem.vue
Lines changed: 4 additions & 3 deletions
@@ -17,38 +17,36 @@ export default {
     vertical: Boolean,
     inCard: Boolean
   },
+  provide () {
+    const nav = {}
+    Object.defineProperty(nav, 'active', {
+      get: () => this.activeItemInstance
+    })
+    return { nav }
+  },
+  data () {
+    return {
+      activeItemInstance: null
+    }
+  },
   computed: {
     navClasses () {
       return {
         'nav': true,
-        'nav-tabs': this.variant === 'tabs',
-        'nav-pills': this.variant === 'pills',
+        [`nav-${this.variant}`]: this.variant,
         'flex-column': this.vertical,
         'nav-fill': this.fill,
         'nav-justified': this.justified,
-        'card-header-tabs': this.inCard && this.variant === 'tabs',
-        'card-header-pills': this.inCard && this.variant === 'pills'
+        [`card-header-${this.variant}`]: this.inCard && this.variant
       }
     }
   },
   methods: {
     onClick (e) {
-      const clickedItem = this.getClickedItem(e)
-      clickedItem ? this.activateItem(clickedItem) : null
-    },
-    getClickedItem (e) {
-      return this.$children.filter(item => this.itemWasActivated(item, e))[0]
-    },
-    itemWasActivated (item, e) {
-      return item.$el.contains(e.target) && 
-             !item.disabled && 
-             item.isActive !== undefined
-    },
-    activateItem (itemToActivate) {
-      // Works on CNavItem, CTab, CDropdown and every component that have 
-      // 'isActive' data prop that determines active state
       this.$children.forEach(item => {
-        return item.isActive = item === itemToActivate ? true : false
+        if (item.$el.contains(e.target) && !item.disabled) {
+          this.activeItemInstance = item
+        }
       })
     }
   }
 
@@ -17,10 +17,11 @@ export default {
   components: {
     CLink
   },
+  inject: { nav: { default: {} }},
   props,
-  data () {
-    return {
-      isActive: this.disabled ? null : this.active
+  computed: {
+    isActive () {
+      return this.nav.active ? this.nav.active === this : this.active
     }
   }
 }