diff --git a/src/_styles/Menu.scss b/src/_styles/Menu.scss
index 2670bbabc..7610eaacf 100644
--- a/src/_styles/Menu.scss
+++ b/src/_styles/Menu.scss
@@ -1,309 +1,309 @@
 
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include themes-mixin() {
-  @include b(menu) {
-    color: $--menu-item-text-color;
-    @include once {
-      overflow: hidden;
-      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-      width: 100%;
-      box-sizing: border-box;
-      font-size: 14px;
-      @include m(transition-disabled) {
-        @include b(menu-item-content) {
-          @include e(icon) {
-            @include b(icon) {
-              transition: none !important;
-            }
-          }
-          @include b(menu-item-content-header) {
-            transition: none !important;
-            @include e(extra) {
-              transition: none !important;
-            }
-          }
-        }
-      }
-    }
-    @include m(horizontal) {
-      @include b(menu-list) {
-        @include once {
-          display: flex;
-          @include b(submenu) {
-            margin: 0;
-          }
-        }
-        @include b(menu-item) {
-          @include once {
-            margin: 0;
-            &::after {
-              background-color: transparent !important;
-            }
-          }
-          @include m(selected) {
-            @include b(menu-item-content) {
-              border-bottom: 2px solid $--menu-horizontal-border-color;
-            }
-          }
-        }
-        @include b(menu-item-content) {
-          @include once {
-            padding: 0 20px;
-            border-bottom: 2px solid transparent;
-          }
-          @include m(child-selected) {
-            border-bottom: 2px solid $--menu-horizontal-border-color;
-          }
-          @include not-m(disabled) {
-            &:hover {
-              border-bottom: 2px solid $--menu-horizontal-border-color;
-            }
-            @include m(hover) {
-              border-bottom: 2px solid $--menu-horizontal-border-color;
-            }
-          }
-        }
-      }
-    }
-    @include m(collapsed) {
-      @include b(menu-list) {
-        @include b(menu-item) {
-          @include once {
-            &::after {
-              background-color: transparent !important;
-            }
-          }
-        }
-        @include b(menu-item-content) {
-          @include once {
-            @include b(menu-item-content-header) {
-              opacity: 0;
-            }
-            @include e(arrow) {
-              opacity: 0;
-            }
-          }
-          @include e(icon) {
-            @include b(icon) {
-              fill: map-get($--menu-item-content-icon-color, 'collapsed');
-              stroke: map-get($--menu-item-content-icon-color, 'collapsed');
-            }
-          }
-        }
-      }
-    }
-    @include b(menu-list) {
-      @include once {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        @include b(menu-item) {
-          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-          list-style: none;
-          height: 42px;
-          margin-top: 6px;
-        }
-        @include b(submenu) {
-          cursor: pointer;
-          position: relative;
-          margin-top: 6px;
-          @include b(menu-item-content) {
-            height: 42px;
-          }
-          @include b(submenu-content) {
-            overflow: hidden; // margin overlay work around, Todo, refactor
-            padding: 0;
-            list-style: none;
-            @include fade-in-height-expand-transition($duration: .2s);
-          }
-        }
-      }
-      @include b(menu-item) {
-        @include once {
-          position: relative;
-          &::after {
-            content: "";
-            background-color: transparent;
-            position: absolute;
-            left: 8px;
-            right: 8px;
-            top: 0;
-            bottom: 0;
-            border-radius: $--n-border-radius;
-            transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-            pointer-events: none;
-          }
-        }
-        @include not-m(disabled) {
-          &:active {
-            &::after {
-              background-color: $--menu-item-background-color;
-            }
-          }
-        }
-        @include m(selected) {
-          &::after {
-            background-color: $--menu-item-background-color;
-          }
-          @include b(menu-item-content) {
-            @include e(icon) {
-              @include b(icon) {
-                fill: map-get($--menu-item-content-icon-color, 'selected');
-                stroke: map-get($--menu-item-content-icon-color, 'selected');
-              }
-            }
-            @include b(menu-item-content-header) {
-              color: map-get($--menu-item-content-text-color, 'selected');
-              @include e(extra) {
-                color: map-get($--menu-item-content-extra-text-color, 'selected');
-              }
-            }
-          }
-        }
-      }
-      @include b(menu-item-content) {
-        @include once {
-          box-sizing: border-box;
-          line-height: 1.75;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
-          position: relative;
-          z-index: auto;
-          padding-right: 12px;
-          @include m(disabled) {
-            opacity: 0.45;
-            cursor: not-allowed;
-          }
-          @include m(collapsed) {
-            @include e(arrow) {
-              transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
-              transform: rotate(225deg);
-            }
-          }
-          @include m(uncollapsable) {
-            cursor: default;
-          }
-        }
-        @include e(icon) {
-          @include once {
-            transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
-            box-sizing: content-box;
-            flex-shrink: 0;
-            padding-right: 8px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-          @include b(icon) {
-            fill: map-get($--menu-item-content-icon-color, 'default');
-            stroke: map-get($--menu-item-content-icon-color, 'default');
-          }
-        }
-        @include e(arrow) {
-          border-left: 2px solid  $--menu-submenu-arrow-color;
-          border-top: 2px solid  $--menu-submenu-arrow-color;
-          @include once {
-            content: '';
-            height: 6px;
-            width: 6px;
-            position: absolute;
-            right: 24px;
-            top: calc(50% - 2px);
-            transform: rotate(45deg) ;
-            transform-origin: 25% 25%;
-            opacity: 1;
-            transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier .1s, border-color 0.3s $--n-ease-in-out-cubic-bezier;
-          }
-        }
-        @include b(menu-item-content-header) {
-          @include once {
-            transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
-            opacity: 1;
-            flex-grow: 1;
-            flex-shrink: 1;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          color: map-get($--menu-item-content-text-color, 'default');
-          @include e(extra) {
-            @include once {
-              white-space: nowrap;
-              margin-left: 6px;
-              display: inline-block;
-              transition: color 0.3s $--n-ease-in-out-cubic-bezier;
-              font-size: 13px;
-            }
-            color: map-get($--menu-item-content-extra-text-color, 'default');
-          }
-        }
-        @include not-m(disabled) {
-          & {
-            @include not-m(uncollapsable) {
-              &:hover {
-                @include e(icon) {
-                  @include b(icon) {
-                    fill: map-get($--menu-item-content-icon-color, 'hover');
-                    stroke: map-get($--menu-item-content-icon-color, 'hover');
-                  }
-                }
-                @include b(menu-item-content-header) {
-                  color:  map-get($--menu-item-content-text-color, 'hover');
-                  @include e(extra) {
-                    color:  map-get($--menu-item-content-extra-text-color, 'selected');
-                  }
-                }
-              }
-              @include m(hover) {
-                @include e(icon) {
-                  @include b(icon) {
-                    fill: map-get($--menu-item-content-icon-color, 'hover');
-                    stroke: map-get($--menu-item-content-icon-color, 'hover');
-                  }
-                }
-                @include b(menu-item-content-header) {
-                  color:  map-get($--menu-item-content-text-color, 'hover');
-                  @include e(extra) {
-                    color:  map-get($--menu-item-content-extra-text-color, 'selected');
-                  }
-                }
-              }
-            }
-          }
-        }
-        @include m(child-selected) {
-          @include b(menu-item-content-header) {
-            color: map-get($--menu-item-content-text-color, 'child-selected');
-            @include e(extra) {
-              color: map-get($--menu-item-content-extra-text-color, 'child-selected');
-            }
-          }
-          @include e(icon) {
-            @include b(icon) {
-              fill: map-get($--menu-item-content-icon-color, 'child-selected');
-              stroke: map-get($--menu-item-content-icon-color, 'child-selected');
-            }
-          }
-        }
-      }
-    }
-    @include b(menu-item-group) {
-      @include b(menu-item-group-title) {
-        margin-top: 6px;
-        color: $--menu-item-group-text-color;
-        @include once {
-          cursor: default;
-          font-size: 13px;
-          height: 36px;
-          display: flex;
-          align-items: center;
-          transition: padding-left .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
-        }        
-      }
-    }
-  }
-}
\ No newline at end of file
+// @include themes-mixin() {
+//   @include b(menu) {
+//     color: $--menu-item-text-color;
+//     @include once {
+//       overflow: hidden;
+//       transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//       width: 100%;
+//       box-sizing: border-box;
+//       font-size: 14px;
+//       @include m(transition-disabled) {
+//         @include b(menu-item-content) {
+//           @include e(icon) {
+//             @include b(icon) {
+//               transition: none !important;
+//             }
+//           }
+//           @include b(menu-item-content-header) {
+//             transition: none !important;
+//             @include e(extra) {
+//               transition: none !important;
+//             }
+//           }
+//         }
+//       }
+//     }
+//     @include m(horizontal) {
+//       @include b(menu-list) {
+//         @include once {
+//           display: flex;
+//           @include b(submenu) {
+//             margin: 0;
+//           }
+//         }
+//         @include b(menu-item) {
+//           @include once {
+//             margin: 0;
+//             &::after {
+//               background-color: transparent !important;
+//             }
+//           }
+//           @include m(selected) {
+//             @include b(menu-item-content) {
+//               border-bottom: 2px solid $--menu-horizontal-border-color;
+//             }
+//           }
+//         }
+//         @include b(menu-item-content) {
+//           @include once {
+//             padding: 0 20px;
+//             border-bottom: 2px solid transparent;
+//           }
+//           @include m(child-selected) {
+//             border-bottom: 2px solid $--menu-horizontal-border-color;
+//           }
+//           @include not-m(disabled) {
+//             &:hover {
+//               border-bottom: 2px solid $--menu-horizontal-border-color;
+//             }
+//             @include m(hover) {
+//               border-bottom: 2px solid $--menu-horizontal-border-color;
+//             }
+//           }
+//         }
+//       }
+//     }
+//     @include m(collapsed) {
+//       @include b(menu-list) {
+//         @include b(menu-item) {
+//           @include once {
+//             &::after {
+//               background-color: transparent !important;
+//             }
+//           }
+//         }
+//         @include b(menu-item-content) {
+//           @include once {
+//             @include b(menu-item-content-header) {
+//               opacity: 0;
+//             }
+//             @include e(arrow) {
+//               opacity: 0;
+//             }
+//           }
+//           @include e(icon) {
+//             @include b(icon) {
+//               fill: map-get($--menu-item-content-icon-color, 'collapsed');
+//               stroke: map-get($--menu-item-content-icon-color, 'collapsed');
+//             }
+//           }
+//         }
+//       }
+//     }
+//     @include b(menu-list) {
+//       @include once {
+//         list-style: none;
+//         margin: 0;
+//         padding: 0;
+//         @include b(menu-item) {
+//           transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//           list-style: none;
+//           height: 42px;
+//           margin-top: 6px;
+//         }
+//         @include b(submenu) {
+//           cursor: pointer;
+//           position: relative;
+//           margin-top: 6px;
+//           @include b(menu-item-content) {
+//             height: 42px;
+//           }
+//           @include b(submenu-content) {
+//             overflow: hidden; // margin overlay work around, Todo, refactor
+//             padding: 0;
+//             list-style: none;
+//             @include fade-in-height-expand-transition($duration: .2s);
+//           }
+//         }
+//       }
+//       @include b(menu-item) {
+//         @include once {
+//           position: relative;
+//           &::after {
+//             content: "";
+//             background-color: transparent;
+//             position: absolute;
+//             left: 8px;
+//             right: 8px;
+//             top: 0;
+//             bottom: 0;
+//             border-radius: $--n-border-radius;
+//             transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//             pointer-events: none;
+//           }
+//         }
+//         @include not-m(disabled) {
+//           &:active {
+//             &::after {
+//               background-color: $--menu-item-background-color;
+//             }
+//           }
+//         }
+//         @include m(selected) {
+//           &::after {
+//             background-color: $--menu-item-background-color;
+//           }
+//           @include b(menu-item-content) {
+//             @include e(icon) {
+//               @include b(icon) {
+//                 fill: map-get($--menu-item-content-icon-color, 'selected');
+//                 stroke: map-get($--menu-item-content-icon-color, 'selected');
+//               }
+//             }
+//             @include b(menu-item-content-header) {
+//               color: map-get($--menu-item-content-text-color, 'selected');
+//               @include e(extra) {
+//                 color: map-get($--menu-item-content-extra-text-color, 'selected');
+//               }
+//             }
+//           }
+//         }
+//       }
+//       @include b(menu-item-content) {
+//         @include once {
+//           box-sizing: border-box;
+//           line-height: 1.75;
+//           height: 100%;
+//           display: flex;
+//           align-items: center;
+//           cursor: pointer;
+//           transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
+//           position: relative;
+//           z-index: auto;
+//           padding-right: 12px;
+//           @include m(disabled) {
+//             opacity: 0.45;
+//             cursor: not-allowed;
+//           }
+//           @include m(collapsed) {
+//             @include e(arrow) {
+//               transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
+//               transform: rotate(225deg);
+//             }
+//           }
+//           @include m(uncollapsable) {
+//             cursor: default;
+//           }
+//         }
+//         @include e(icon) {
+//           @include once {
+//             transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
+//             box-sizing: content-box;
+//             flex-shrink: 0;
+//             padding-right: 8px;
+//             display: inline-flex;
+//             align-items: center;
+//             justify-content: center;
+//           }
+//           @include b(icon) {
+//             fill: map-get($--menu-item-content-icon-color, 'default');
+//             stroke: map-get($--menu-item-content-icon-color, 'default');
+//           }
+//         }
+//         @include e(arrow) {
+//           border-left: 2px solid  $--menu-submenu-arrow-color;
+//           border-top: 2px solid  $--menu-submenu-arrow-color;
+//           @include once {
+//             content: '';
+//             height: 6px;
+//             width: 6px;
+//             position: absolute;
+//             right: 24px;
+//             top: calc(50% - 2px);
+//             transform: rotate(45deg) ;
+//             transform-origin: 25% 25%;
+//             opacity: 1;
+//             transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier .1s, border-color 0.3s $--n-ease-in-out-cubic-bezier;
+//           }
+//         }
+//         @include b(menu-item-content-header) {
+//           @include once {
+//             transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
+//             opacity: 1;
+//             flex-grow: 1;
+//             flex-shrink: 1;
+//             white-space: nowrap;
+//             overflow: hidden;
+//             text-overflow: ellipsis;
+//           }
+//           color: map-get($--menu-item-content-text-color, 'default');
+//           @include e(extra) {
+//             @include once {
+//               white-space: nowrap;
+//               margin-left: 6px;
+//               display: inline-block;
+//               transition: color 0.3s $--n-ease-in-out-cubic-bezier;
+//               font-size: 13px;
+//             }
+//             color: map-get($--menu-item-content-extra-text-color, 'default');
+//           }
+//         }
+//         @include not-m(disabled) {
+//           & {
+//             @include not-m(uncollapsable) {
+//               &:hover {
+//                 @include e(icon) {
+//                   @include b(icon) {
+//                     fill: map-get($--menu-item-content-icon-color, 'hover');
+//                     stroke: map-get($--menu-item-content-icon-color, 'hover');
+//                   }
+//                 }
+//                 @include b(menu-item-content-header) {
+//                   color:  map-get($--menu-item-content-text-color, 'hover');
+//                   @include e(extra) {
+//                     color:  map-get($--menu-item-content-extra-text-color, 'selected');
+//                   }
+//                 }
+//               }
+//               @include m(hover) {
+//                 @include e(icon) {
+//                   @include b(icon) {
+//                     fill: map-get($--menu-item-content-icon-color, 'hover');
+//                     stroke: map-get($--menu-item-content-icon-color, 'hover');
+//                   }
+//                 }
+//                 @include b(menu-item-content-header) {
+//                   color:  map-get($--menu-item-content-text-color, 'hover');
+//                   @include e(extra) {
+//                     color:  map-get($--menu-item-content-extra-text-color, 'selected');
+//                   }
+//                 }
+//               }
+//             }
+//           }
+//         }
+//         @include m(child-selected) {
+//           @include b(menu-item-content-header) {
+//             color: map-get($--menu-item-content-text-color, 'child-selected');
+//             @include e(extra) {
+//               color: map-get($--menu-item-content-extra-text-color, 'child-selected');
+//             }
+//           }
+//           @include e(icon) {
+//             @include b(icon) {
+//               fill: map-get($--menu-item-content-icon-color, 'child-selected');
+//               stroke: map-get($--menu-item-content-icon-color, 'child-selected');
+//             }
+//           }
+//         }
+//       }
+//     }
+//     @include b(menu-item-group) {
+//       @include b(menu-item-group-title) {
+//         margin-top: 6px;
+//         color: $--menu-item-group-text-color;
+//         @include once {
+//           cursor: default;
+//           font-size: 13px;
+//           height: 36px;
+//           display: flex;
+//           align-items: center;
+//           transition: padding-left .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
+//         }        
+//       }
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/src/_styles/index.scss b/src/_styles/index.scss
index 15b9f401e..9843b7b06 100644
--- a/src/_styles/index.scss
+++ b/src/_styles/index.scss
@@ -33,7 +33,6 @@
 @import './Grid.scss';
 @import './Statistic.scss';
 @import './Descriptions.scss';
-@import "./Menu.scss";
 @import './Layout.scss';
 @import "./Popover.scss";
 @import "./Result.scss";
diff --git a/src/create.js b/src/create.js
index 7af19f253..e1697f8d5 100644
--- a/src/create.js
+++ b/src/create.js
@@ -68,6 +68,10 @@ function create ({
       component.install(Vue, naive)
     }
   }
+  if (process.env.NODE_ENV !== 'production') {
+    if (!window.naive) window.naive = {}
+    window.naive.styles = styles
+  }
   return naive
 }
 
diff --git a/src/menu/src/styles/themed-base.cssr.js b/src/menu/src/styles/themed-base.cssr.js
index 4424467cd..6595f9037 100644
--- a/src/menu/src/styles/themed-base.cssr.js
+++ b/src/menu/src/styles/themed-base.cssr.js
@@ -1,6 +1,333 @@
 import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
+import fadeInHeightExpandTransition from '../../../styles/_transitions/fade-in-height-expand'
 
 export default c([
   ({ props }) => {
+    const {
+      itemTextColor,
+      itemTextColorHover,
+      itemTextColorChildSelected,
+      groupTextColor,
+      borderColorHorizontal,
+      itemIconColor,
+      itemIconColorHover,
+      itemIconColorCollapsed,
+      itemIconColorSelected,
+      itemIconColorChildSelected,
+      itemColorMatch,
+      itemTextColorSelected,
+      itemExtraTextColor,
+      itemExtraTextColorHover,
+      itemExtraTextColorSelected,
+      itemExtraTextColorChildSelected,
+      submenuArrowColor,
+      borderRadius
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('menu', {
+      color: itemTextColor,
+      overflow: 'hidden',
+      transition: `background-color .3s ${easeInOutCubicBezier}`,
+      width: '100%',
+      boxSizing: 'border-box',
+      fontSize: '14px'
+    }, [
+      cM('transition-disabled', [
+        cB('menu-item-content', [
+          cE('icon', [
+            cB('icon', {
+              transition: 'none !important'
+            })
+          ])
+        ]),
+        cB('menu-item-content-header', {
+          transition: 'none !important'
+        }, [
+          cE('extra', {
+            transition: 'none !important'
+          })
+        ])
+      ]),
+      cM('horizontal', [
+        cB('menu-list', {
+          display: 'flex'
+        }, [
+          cB('submenu', {
+            margin: 0
+          }),
+          cB('menu-item', {
+            margin: 0
+          }, [
+            c('&::after', {
+              backgroundColor: 'transparent !important'
+            }),
+            cM('selected', [
+              cB('menu-item-content', {
+                borderBottom: `2px solid ${borderColorHorizontal}`
+              })
+            ])
+          ]),
+          cB('menu-item-content', {
+            padding: '0 20px',
+            borderBottom: '2px solid transparent'
+          }, [
+            cM('child-selected', {
+              borderBottom: `2px solid ${borderColorHorizontal}`
+            }),
+            cNotM('disabled', [
+              c('&:hover', {
+                borderBottom: `2px solid ${borderColorHorizontal}`
+              }),
+              cM('hover', {
+                borderBottom: `2px solid ${borderColorHorizontal}`
+              })
+            ])
+          ])
+        ])
+      ]),
+      cM('collapsed', [
+        cB('menu-list', [
+          cB('menu-item', [
+            c('&::after', {
+              backgroundColor: 'transparent !important'
+            })
+          ]),
+          cB('menu-item-content', [
+            cB('menu-item-content-header', {
+              opacity: 0
+            }),
+            cE('arrow', {
+              opacity: 0
+            }),
+            cE('icon', [
+              cB('icon', {
+                fill: itemIconColorCollapsed,
+                stroke: itemIconColorCollapsed
+              })
+            ])
+          ])
+        ])
+      ]),
+      cB('menu-list', {
+        listStyle: 'none',
+        margin: 0,
+        padding: 0
+      }, [
+        cB('menu-item', {
+          transition: `background-color .3s ${easeInOutCubicBezier}`,
+          listStyle: 'none',
+          height: '42px',
+          marginTop: '6px',
+          position: 'relative'
+        }, [
+          c('&::after', {
+            raw: `
+              content: "";
+              background-color: transparent;
+              position: absolute;
+              left: 8px;
+              right: 8px;
+              top: 0;
+              bottom: 0;
+              pointer-events: none;
+            `,
+            borderRadius,
+            transition: `background-color .3s ${easeInOutCubicBezier}`
+          }),
+          cNotM('disabled', [
+            c('&:active::after', {
+              backgroundColor: itemColorMatch
+            })
+          ]),
+          cM('selected', [
+            c('&::after', {
+              backgroundColor: itemColorMatch
+            }),
+            cB('menu-item-content', [
+              cE('icon', [
+                cB('icon', {
+                  fill: itemIconColorSelected,
+                  stroke: itemIconColorSelected
+                })
+              ]),
+              cB('menu-item-content-header', {
+                color: itemTextColorSelected
+              }, [
+                cE('extra', {
+                  color: itemExtraTextColorSelected
+                })
+              ])
+            ])
+          ])
+        ]),
+        cB('menu-item-content', {
+          raw: `
+            box-sizing: border-box;
+            line-height: 1.75;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            position: relative;
+            z-index: auto;
+            padding-right: 12px;
+            transition:
+              background-color .3s ${easeInOutCubicBezier},
+              padding-left .3s ${easeInOutCubicBezier},
+              border-color .3s ${easeInOutCubicBezier};
+          `
+        }, [
+          cM('disabled', {
+            opacity: '.45',
+            cursor: 'not-allowed'
+          }),
+          cM('collapsed', [
+            cE('arrow', {
+              transition: `
+                transform 0.2s ${easeInOutCubicBezier},
+                opacity 0.2s ${easeInOutCubicBezier},
+                border-color 0.3s ${easeInOutCubicBezier}
+              `,
+              transform: 'rotate(225deg)'
+            })
+          ]),
+          cM('uncollapsable', {
+            cursor: 'default'
+          }),
+          cM('child-selected', [
+            cB('menu-item-content-header', {
+              color: itemTextColorChildSelected
+            }, [
+              cE('extra', {
+                color: itemExtraTextColorChildSelected
+              })
+            ]),
+            cE('icon', [
+              cB('icon', {
+                fill: itemIconColorChildSelected,
+                stroke: itemIconColorChildSelected
+              })
+            ])
+          ]),
+          cNotM('disabled', [
+            cNotM('uncollapsable', [
+              c('&:hover', [
+                cE('icon', [
+                  cB('icon', {
+                    fill: itemIconColorHover,
+                    stroke: itemIconColorHover
+                  })
+                ]),
+                cB('menu-item-content-header', {
+                  color: itemTextColorHover
+                }, [
+                  cE('extra', {
+                    color: itemExtraTextColorHover
+                  })
+                ])
+              ])
+            ])
+          ]),
+          cE('icon', {
+            raw: `
+              transition:
+                font-size .3s ${easeInOutCubicBezier},
+                padding-right .3s ${easeInOutCubicBezier};
+              box-sizing: content-box;
+              flex-shrink: 0;
+              padding-right: 8px;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+            `
+          }, [
+            cB('icon', {
+              fill: itemIconColor,
+              stroke: itemIconColor
+            })
+          ]),
+          cE('arrow', {
+            raw: `
+              content: '';
+              height: 6px;
+              width: 6px;
+              position: absolute;
+              right: 24px;
+              top: calc(50% - 2px);
+              transform: rotate(45deg);
+              transform-origin: 25% 25%;
+              opacity: 1;
+            `,
+            borderLeft: `2px solid ${submenuArrowColor}`,
+            borderTop: `2px solid ${submenuArrowColor}`,
+            transition: `
+              transform 0.2s ${easeInOutCubicBezier},
+              opacity 0.2s ${easeInOutCubicBezier} .1s,
+              border-color 0.3s ${easeInOutCubicBezier}`
+          }),
+          cB('menu-item-content-header', {
+            raw: `
+              transition:
+                color .3s ${easeInOutCubicBezier},
+                opacity .3s ${easeInOutCubicBezier};
+              opacity: 1;
+              flex-grow: 1;
+              flex-shrink: 1;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            `,
+            color: itemTextColor
+          }, [
+            cE('extra', {
+              raw: `
+                white-space: nowrap;
+                margin-left: 6px;
+                display: inline-block;
+                transition: color 0.3s ${easeInOutCubicBezier};
+                font-size: 13px;
+              `,
+              color: itemExtraTextColor
+            })
+          ])
+        ]),
+        cB('submenu', {
+          cursor: 'pointer',
+          position: 'relative',
+          marginTop: '6px'
+        }, [
+          cB('menu-item-content', {
+            height: '42px'
+          }),
+          cB('submenu-content', {
+            overflow: 'hidden',
+            padding: 0,
+            listStyle: 'none'
+          }, [
+            fadeInHeightExpandTransition({
+              duration: '.2s'
+            })
+          ])
+        ]),
+        cB('menu-item-group', [
+          cB('menu-item-group-title', {
+            raw: `
+              margin-top: 6px;
+              color: ${groupTextColor};
+              cursor: default;
+              font-size: 13px;
+              height: 36px;
+              display: flex;
+              align-items: center;
+              transition:
+                padding-left .3s ${easeInOutCubicBezier},
+                color .3s ${easeInOutCubicBezier};
+            `
+          })
+        ])
+      ])
+    ])
   }
 ])
diff --git a/src/menu/styles/dark.js b/src/menu/styles/dark.js
index b42b43010..f8d921372 100644
--- a/src/menu/styles/dark.js
+++ b/src/menu/styles/dark.js
@@ -6,6 +6,7 @@ export default create({
   name: 'Menu',
   getDerivedVariables ({ base, derived }) {
     return {
+      borderRadius: base.borderRadius,
       groupTextColor: derived.tertiaryTextOverlayColor,
       itemColorMatch: changeColor(derived.primaryColor, { alpha: 0.15 }),
       itemTextColor: derived.secondaryTextOverlayColor,
diff --git a/src/menu/styles/light.js b/src/menu/styles/light.js
index 0da550bef..48c08f10b 100644
--- a/src/menu/styles/light.js
+++ b/src/menu/styles/light.js
@@ -6,6 +6,7 @@ export default create({
   name: 'Menu',
   getDerivedVariables ({ base, derived }) {
     return {
+      borderRadius: base.borderRadius,
       groupTextColor: derived.tertiaryTextColor,
       itemColorMatch: changeColor(derived.primaryColor, { alpha: 0.1 }),
       itemTextColor: derived.secondaryTextColor,