feat(CNav): add enclosed variants

mrholek · mrholek · commit 5c26db6c4320 · 2025-06-04T12:55:52.000+02:00
diff --git a/packages/coreui-vue/src/components/nav/CNav.ts b/packages/coreui-vue/src/components/nav/CNav.ts
@@ -24,12 +24,12 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     * @values 'enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },
@@ -40,6 +40,7 @@ const CNav = defineComponent({
         {
           class: [
             'nav',
+            props.variant === 'enclosed-pills' && 'nav-enclosed',
             {
               [`nav-${props.layout}`]: props.layout,
               [`nav-${props.variant}`]: props.variant,
diff --git a/packages/docs/api/tabs/CTabList.api.md b/packages/docs/api/tabs/CTabList.api.md
@@ -8,7 +8,7 @@ import CTabList from '@coreui/vue/src/components/tabs/CTabList'
 
 #### Props
 
-| Prop name   | Description                           | Type   | Values                                                   | Default |
-| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
-| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                  | -       |
-| **variant** | Set the nav variant to tabs or pills. | string | `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
+| Prop name   | Description                           | Type   | Values                                                                                     | Default |
+| ----------- | ------------------------------------- | ------ | ------------------------------------------------------------------------------------------ | ------- |
+| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                                                    | -       |
+| **variant** | Set the nav variant to tabs or pills. | string | `'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/components/navs-tabs.md b/packages/docs/components/navs-tabs.md
@@ -402,6 +402,96 @@ Take that same code, but use `variant="underline-border"` instead:
 </CNav>
 ```
 
+### Enclosed
+
+Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
+
+::: demo
+<CNav variant="enclosed">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+:::
+```vue
+<CNav variant="enclosed">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+::: demo
+<CNav variant="enclosed-pills">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+:::
+```vue
+<CNav variant="enclosed-pills">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+
 ### Fill and justify
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
