@patternfly/patternfly 4.156.3 → 4.159.0

package/components/Menu/menu.scss

@@ -7,9 +7,12 @@
   --pf-c-menu--MinWidth: auto;
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-menu--Top: auto;
 
   // Flyout
   --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
+  --pf-c-menu--m-flyout__menu--Right: auto;
+  --pf-c-menu--m-flyout__menu--Bottom: auto;
   --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
   --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -54,7 +57,6 @@
   --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
-
   // Search
   --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
@@ -183,6 +185,7 @@
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
 
+  top: var(--pf-c-menu--Top);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
   min-width: var(--pf-c-menu--MinWidth);
@@ -190,8 +193,6 @@
   box-shadow: var(--pf-c-menu--BoxShadow);
 
   .pf-c-menu__content {
-    overflow-y: auto;
-
     & & {
       overflow: visible;
     }
@@ -202,33 +203,29 @@
     margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
   }
 
-  &.pf-m-flyout {
-    overflow: visible;
-
-    .pf-c-menu {
-      position: absolute;
-      top: var(--pf-c-menu--m-flyout__menu--Top);
-      right: auto;
-      left: var(--pf-c-menu--m-flyout__menu--Left);
-
-      &.pf-m-top {
-        top: auto;
-        bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
-      }
+  // nested flyout menu
+  & &.pf-m-flyout,
+  &.pf-m-flyout & {
+    position: absolute;
+    top: var(--pf-c-menu--m-flyout__menu--Top);
+    right: var(--pf-c-menu--m-flyout__menu--Right);
+    bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
+    left: var(--pf-c-menu--m-flyout__menu--Left);
 
-      &.pf-m-left {
-        right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
-        left: auto;
-      }
-    }
 
     .pf-c-menu__content {
       overflow-y: visible;
     }
+  }
 
-    .pf-c-menu__list-item {
-      position: relative;
-    }
+  &.pf-m-top {
+    --pf-c-menu--m-flyout__menu--Top: auto;
+    --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
+  }
+
+  &.pf-m-left {
+    --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
+    --pf-c-menu--m-flyout__menu--Left: auto;
   }
 
   &.pf-m-drilldown {
@@ -276,6 +273,11 @@
       position: relative;
       overflow: hidden;
       transition: var(--pf-c-menu--m-drilldown__list--Transition);
+
+      & .pf-c-menu__list {
+        --pf-c-menu__list--PaddingTop: 0;
+        --pf-c-menu__list--PaddingBottom: 0;
+      }
     }
 
     // stylelint-disable selector-max-class, max-nesting-depth
@@ -329,6 +331,117 @@
     --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
     --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
     --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
+
+    .pf-c-menu__content {
+      overflow-y: auto;
+    }
+  }
+
+  // Nav variant
+  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-menu--m-nav__list--PaddingTop: 0;
+  --pf-c-menu--m-nav__list--PaddingBottom: 0;
+  --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
+  --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
+
+  // Nested menus
+  --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
+  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
+  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
+  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
+
+  &.pf-m-nav,
+  &.pf-m-nav & {
+    --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
+    --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
+    --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
+    --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
+    --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
+    --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
+    --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
+    --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
+    --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
+    --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
+    --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
+    --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
+
+    box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
+
+    // stylelint-disable max-nesting-depth, selector-max-class
+    .pf-c-menu__item {
+      position: relative;
+      outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
+
+      &::before {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        content: "";
+        border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
+      }
+
+      &:hover {
+        &::after {
+          position: absolute;
+          top: var(--pf-c-menu--m-nav__item--hover--after--Top);
+          bottom: 0;
+          left: 0;
+          content: "";
+          border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
+        }
+      }
+    }
+    // stylelint-enable
+  }
+
+  &.pf-m-nav & {
+    width: 100%;
+  }
+
+  &.pf-m-flyout.pf-m-nav,
+  &.pf-m-flyout.pf-m-nav & {
+    top: var(--pf-c-menu--m-nav--c-menu--Top);
+    left: var(--pf-c-menu--m-nav--c-menu--Left);
+
+    // stylelint-disable selector-max-class
+    &.pf-m-top {
+      --pf-c-menu--m-nav--c-menu--Top: auto;
+
+      bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
+    }
+
+    &.pf-m-left {
+      --pf-c-menu--m-nav--c-menu--Left: auto;
+
+      right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
+    }
+
+    .pf-c-menu__list-item:first-child {
+      --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
+    }
+
+    .pf-c-menu__list-item:first-child .pf-c-menu {
+      --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
+    }
+    // stylelint-enable
   }
 }
 
@@ -414,6 +527,7 @@
 .pf-c-menu__list-item {
   @include pf-hidden-visible(var(--pf-c-menu__list-item--Display));
 
+  position: relative;
   color: var(--pf-c-menu__list-item--Color);
   background-color: var(--pf-c-menu__list-item--BackgroundColor);
 

package/components/MenuToggle/menu-toggle.css

@@ -33,14 +33,28 @@
   --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
-  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -100,6 +114,39 @@
   --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
   --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
 }
+.pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
+  border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
+}
+.pf-c-menu-toggle.pf-m-secondary {
+  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
+  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
+}
+.pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
+  border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
+}
+.pf-c-menu-toggle.pf-m-secondary::before {
+  border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
+  border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary::after {
+  border: 0;
+}
+.pf-c-menu-toggle.pf-m-secondary:hover {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary:focus {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary:active {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
+}
 .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
   --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);

package/components/MenuToggle/menu-toggle.scss

@@ -49,8 +49,8 @@
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
 
   // Primary
-  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -58,6 +58,22 @@
   --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
 
+  // Secondary
+  --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
+
   // Plain
   --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
@@ -134,6 +150,51 @@
     --pf-c-menu-toggle--active--BackgroundColor: var(--pf-c-menu-toggle--m-primary--active--BackgroundColor);
     --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
     --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
+
+
+    &,
+    &::before {
+      border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
+    }
+  }
+
+  &.pf-m-secondary {
+    --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
+    --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
+
+    &,
+    &::before {
+      border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
+    }
+
+    &::before {
+      border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
+      border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
+    }
+
+    &::after {
+      border: 0;
+    }
+
+    &:hover {
+      --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
+      --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
+    }
+
+    &:focus {
+      --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
+      --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
+    }
+
+    &:active {
+      --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
+      --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
+    }
+
+    &.pf-m-expanded {
+      --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
+      --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
+    }
   }
 
   &.pf-m-plain:not(.pf-m-text) {

package/components/Nav/nav.css

@@ -237,7 +237,6 @@
   --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
-  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
   --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
   --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -246,11 +245,10 @@
   --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
+  --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
   --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
   --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -259,17 +257,52 @@
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
+  --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
+  --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
   --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
-  --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
-  --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
-  --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
-  --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
-  --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
-  --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-nav--c-menu__list--PaddingTop: 0;
+  --pf-c-nav--c-menu__list--PaddingBottom: 0;
+  --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
+  --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
+  --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
+  --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
+  --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
+  --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
+  --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
+  --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
+  --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
+  --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
+  --pf-c-nav--c-menu--m-flyout--Top: 0;
+  --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
+  --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
+  --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
+  --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
+  --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
+  --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
+  --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
   --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
   position: relative;
 }
@@ -286,8 +319,86 @@
     --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
     --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
     --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
+    --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
+    --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
   }
 }
+.pf-c-nav .pf-c-menu {
+  --pf-c-menu--MinWidth: 100%;
+  --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
+  --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
+  --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
+  --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
+  --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
+  --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
+  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
+  --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
+  --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
+  --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
+  --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
+  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
+  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
+  --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
+}
+.pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
+  border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
+}
+.pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
+  --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
+  --pf-c-menu__list--PaddingTop: 0;
+  --pf-c-menu__list--PaddingBottom: 0;
+  --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
+  --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
+  --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
+  --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
+  --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
+  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
+  top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
+  right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
+  bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
+  left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
+}
+.pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
+  --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
+  --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
+}
+.pf-c-nav .pf-c-menu.pf-m-top {
+  --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
+  --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
+}
+.pf-c-nav .pf-c-menu.pf-m-left {
+  --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
+  --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
+}
+.pf-c-nav .pf-c-menu .pf-c-divider {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.pf-c-nav .pf-c-menu__item {
+  position: relative;
+  outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
+}
+.pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+.pf-c-nav .pf-c-menu__item::before {
+  right: 0;
+  bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
+  left: 0;
+  border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
+}
+.pf-c-nav .pf-c-menu__item::after {
+  bottom: 0;
+  left: 0;
+  border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
+}
+.pf-c-nav .pf-c-menu__item.pf-m-current {
+  --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
+  --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
+  background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
+}
 .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
   content: none;
 }
@@ -539,9 +650,13 @@
   --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
   --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
   --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
+  --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
+  --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
   --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
   --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+  --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
   position: absolute;
   top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
   left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -549,14 +664,6 @@
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
   top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
 }
-.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
-  top: auto;
-  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
-}
-.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
-  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
-  left: auto;
-}
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
   --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
@@ -581,25 +688,6 @@
   content: "";
   border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
 }
-.pf-c-nav__item.pf-m-drilldown {
-  --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
-  --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
-  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
-  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
-}
-.pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
-  --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
-  --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
-  --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
-  --pf-c-nav__subnav--MaxHeight: 100%;
-  position: absolute;
-  top: 0;
-  left: 100%;
-  z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
-  width: 100%;
-  height: 100%;
-  background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
-}
 .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
   left: 0;
   z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
@@ -636,14 +724,14 @@
   border-color: var(--pf-c-nav__link--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
 }
-.pf-c-nav__link:hover {
+.pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
   color: var(--pf-c-nav__link--hover--Color);
   background-color: var(--pf-c-nav__link--hover--BackgroundColor);
 }
-.pf-c-nav__link:hover::before {
+.pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
   border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
 }
-.pf-c-nav__link:hover::after {
+.pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
   border-color: var(--pf-c-nav__link--hover--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
 }