diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 21ab9dff..41169236 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -6,6 +6,7 @@
     :mode="mode"
     :collapse="collapse"
     :background-color="backgroundColor"
+    :box-shadow="boxShadow"
     :text-color="textColor"
     :active-text-color="activeTextColor"
     :default-active="defaultActive"
@@ -48,6 +49,10 @@ export default class SMenu extends Vue {
    * By default it's set to `"#2D2926"`
    */
   @Prop({ default: '#2D2926', type: String }) readonly backgroundColor!: string
+  /**
+   * Menu shadow if it exists
+   */
+  @Prop({ default: 'none', type: String }) readonly boxShadow!: string
   /**
    * Text color of menu in hex format.
    *
@@ -104,6 +109,9 @@ export default class SMenu extends Vue {
 
   get computedStyles (): object {
     const styles = {} as any
+    if (this.boxShadow) {
+      styles['--s-menu-box-shadow'] = this.boxShadow
+    }
     if (this.activeHoverColor) {
       styles['--s-menu-color-hover'] = this.activeHoverColor
     }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 564e15e2..e9a9597f 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,6 +1,7 @@
 $margin-bottom-menu-item: 8px;
 
 .s-menu {
+  box-shadow: var(--s-menu-box-shadow);
   padding: 20px 12px;
   &:not(.el-menu--horizontal) > :not(:last-child) {
     margin-bottom: $margin-bottom-menu-item;