diff --git a/packages/react-core/src/components/Masthead/Masthead.tsx b/packages/react-core/src/components/Masthead/Masthead.tsx
index 75c2f3795bf..11650d22d5f 100644
--- a/packages/react-core/src/components/Masthead/Masthead.tsx
+++ b/packages/react-core/src/components/Masthead/Masthead.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
+
 export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
   /** Content rendered inside of the masthead */
   children?: React.ReactNode;
@@ -33,22 +35,27 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
   children,
   className,
   backgroundColor = 'dark',
-  display,
+  display = {
+    md: 'inline'
+  },
   inset,
   ...props
-}: MastheadProps) => (
-  <header
-    className={css(
-      styles.masthead,
-      formatBreakpointMods(display, styles, 'display-'),
-      formatBreakpointMods(inset, styles),
-      backgroundColor === 'light' && styles.modifiers.light,
-      backgroundColor === 'light200' && styles.modifiers.light_200,
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </header>
-);
+}: MastheadProps) => {
+  const { width, getBreakpoint } = React.useContext(PageContext);
+  return (
+    <header
+      className={css(
+        styles.masthead,
+        formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
+        formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
+        backgroundColor === 'light' && styles.modifiers.light,
+        backgroundColor === 'light200' && styles.modifiers.light_200,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </header>
+  );
+};
 Masthead.displayName = 'Masthead';
diff --git a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
index a7d4265f5bc..896fd364b0d 100644
--- a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
+++ b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Masthead verify basic 1`] = `
 <header
-  className="pf-c-masthead"
+  className="pf-c-masthead pf-m-display-inline-on-md"
 >
   test
 </header>
@@ -13,7 +13,7 @@ exports[`Masthead verify custom class 1`] = `
   className="custom-css"
 >
   <header
-    className="pf-c-masthead custom-css"
+    className="pf-c-masthead pf-m-display-inline-on-md custom-css"
   >
     test
   </header>
@@ -23,7 +23,7 @@ exports[`Masthead verify custom class 1`] = `
 exports[`Masthead verify full structure 1`] = `
 <Masthead>
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     <MastheadToggle>
       <div
@@ -94,7 +94,7 @@ exports[`Masthead verify inset2xl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
   >
     test
   </header>
@@ -115,7 +115,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -136,7 +136,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
   >
     test
   </header>
@@ -157,7 +157,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
   >
     test
   </header>
@@ -178,7 +178,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
   >
     test
   </header>
@@ -199,7 +199,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
   >
     test
   </header>
@@ -220,7 +220,7 @@ exports[`Masthead verify insetXl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
   >
     test
   </header>
@@ -241,7 +241,7 @@ exports[`Masthead verify insetXs inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
index d5400b21e21..aeb8d1f2ab9 100644
--- a/packages/react-core/src/components/Nav/Nav.tsx
+++ b/packages/react-core/src/components/Nav/Nav.tsx
@@ -38,7 +38,7 @@ export interface NavProps
   variant?: 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav';
 }
 
-export const NavContext = React.createContext<{
+export interface NavContextProps {
   onSelect?: (
     event: React.FormEvent<HTMLInputElement>,
     groupId: number | string,
@@ -57,7 +57,9 @@ export const NavContext = React.createContext<{
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
-}>({});
+}
+export const navContextDefaults = {};
+export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
 
 export class Nav extends React.Component<
   NavProps,
diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 2dd7d1d3893..8c4f3905aba 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -6,7 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
-import { canUseDOM } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface NavListProps
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
@@ -35,6 +35,7 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   navList = React.createRef<HTMLUListElement>();
+  observer: any = () => {};
 
   handleScrollButtons = () => {
     const container = this.navList.current;
@@ -91,16 +92,12 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   componentDidMount() {
-    if (canUseDOM) {
-      window.addEventListener('resize', this.handleScrollButtons, false);
-    }
+    this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons);
     this.handleScrollButtons();
   }
 
   componentWillUnmount() {
-    if (canUseDOM) {
-      window.removeEventListener('resize', this.handleScrollButtons, false);
-    }
+    this.observer();
   }
 
   render() {
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index b97ca878f2b..81dd7e3f285 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -5,6 +5,8 @@ import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpo
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 import { PageGroup, PageGroupProps } from './PageGroup';
+import { getResizeObserver } from '../../helpers/resizeObserver';
+import { getBreakpoint } from '../../helpers/util';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -15,13 +17,17 @@ export interface PageContextProps {
   isManagedSidebar: boolean;
   onNavToggle: () => void;
   isNavOpen: boolean;
+  width: number;
+  getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
-
-const PageContext = React.createContext<PageContextProps>({
+export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isNavOpen: false,
-  onNavToggle: () => null
-});
+  onNavToggle: () => null,
+  width: null,
+  getBreakpoint
+};
+export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
 
 export const PageContextProvider = PageContext.Provider;
 export const PageContextConsumer = PageContext.Consumer;
@@ -67,6 +73,13 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * Returns object { mobileView: boolean, windowSize: number }
    */
   onPageResize?: (object: any) => void;
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Tertiary nav component for the page */
@@ -87,6 +100,7 @@ export interface PageState {
   desktopIsNavOpen: boolean;
   mobileIsNavOpen: boolean;
   mobileView: boolean;
+  width: number;
 }
 
 export class Page extends React.Component<PageProps, PageState> {
@@ -98,9 +112,12 @@ export class Page extends React.Component<PageProps, PageState> {
     onPageResize: (): void => null,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
-    onNotificationDrawerExpand: () => null
+    onNotificationDrawerExpand: () => null,
+    getBreakpoint
   };
   mainRef = React.createRef<HTMLDivElement>();
+  pageRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
 
   constructor(props: PageProps) {
     super(props);
@@ -110,16 +127,15 @@ export class Page extends React.Component<PageProps, PageState> {
     this.state = {
       desktopIsNavOpen: managedSidebarOpen,
       mobileIsNavOpen: false,
-      mobileView: false
+      mobileView: false,
+      width: null
     };
   }
 
   componentDidMount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      if (canUseDOM) {
-        window.addEventListener('resize', this.handleResize);
-      }
+      this.observer = getResizeObserver(this.pageRef.current, this.handleResize);
       const currentRef = this.mainRef.current;
       if (currentRef) {
         currentRef.addEventListener('mousedown', this.handleMainClick);
@@ -133,9 +149,7 @@ export class Page extends React.Component<PageProps, PageState> {
   componentWillUnmount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      if (canUseDOM) {
-        window.removeEventListener('resize', this.handleResize);
-      }
+      this.observer();
       const currentRef = this.mainRef.current;
       if (currentRef) {
         currentRef.removeEventListener('mousedown', this.handleMainClick);
@@ -144,7 +158,13 @@ export class Page extends React.Component<PageProps, PageState> {
     }
   }
 
-  getWindowWidth = () => (canUseDOM ? window.innerWidth : 1200);
+  getWindowWidth = () => {
+    if (canUseDOM) {
+      return this.pageRef.current ? this.pageRef.current.clientWidth : window.innerWidth;
+    } else {
+      return 1200;
+    }
+  };
 
   isMobile = () =>
     // eslint-disable-next-line radix
@@ -159,6 +179,7 @@ export class Page extends React.Component<PageProps, PageState> {
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
     }
+    this.pageRef.current && this.setState({ width: this.pageRef.current.clientWidth });
   };
 
   handleResize = debounce(this.resize, 250);
@@ -201,6 +222,7 @@ export class Page extends React.Component<PageProps, PageState> {
       defaultManagedSidebarIsOpen,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPageResize,
+      getBreakpoint,
       mainAriaLabel,
       mainTabIndex,
       tertiaryNav,
@@ -210,12 +232,14 @@ export class Page extends React.Component<PageProps, PageState> {
       groupProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen } = this.state;
+    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
 
     const context = {
       isManagedSidebar,
       onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
-      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
+      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
+      width,
+      getBreakpoint
     };
 
     let nav = null;
@@ -270,7 +294,16 @@ export class Page extends React.Component<PageProps, PageState> {
 
     return (
       <PageContextProvider value={context}>
-        <div {...rest} className={css(styles.page, className)}>
+        <div
+          ref={this.pageRef}
+          {...rest}
+          className={css(
+            styles.page,
+            width !== null && 'pf-m-resize-observer',
+            width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
+            className
+          )}
+        >
           {skipToContent}
           {header}
           {sidebar}
diff --git a/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx b/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx
index c74fa4a57dc..6c9f3962bb6 100644
--- a/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx
+++ b/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the page header tools group */
@@ -24,9 +25,19 @@ export const PageHeaderToolsGroup: React.FunctionComponent<PageHeaderToolsGroupP
   className,
   visibility,
   ...props
-}: PageHeaderToolsGroupProps) => (
-  <div className={css(styles.pageHeaderToolsGroup, formatBreakpointMods(visibility, styles), className)} {...props}>
-    {children}
-  </div>
-);
+}: PageHeaderToolsGroupProps) => {
+  const { width, getBreakpoint } = React.useContext(PageContext);
+  return (
+    <div
+      className={css(
+        styles.pageHeaderToolsGroup,
+        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
 PageHeaderToolsGroup.displayName = 'PageHeaderToolsGroup';
diff --git a/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx b/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx
index 961e3a95295..bba419c5563 100644
--- a/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx
+++ b/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in page header tools item. */
@@ -28,18 +29,23 @@ export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemPro
   id,
   className,
   visibility,
-  isSelected
-}: PageHeaderToolsItemProps) => (
-  <div
-    className={css(
-      styles.pageHeaderToolsItem,
-      isSelected && styles.modifiers.selected,
-      formatBreakpointMods(visibility, styles),
-      className
-    )}
-    id={id}
-  >
-    {children}
-  </div>
-);
+  isSelected,
+  ...props
+}: PageHeaderToolsItemProps) => {
+  const { width, getBreakpoint } = React.useContext(PageContext);
+  return (
+    <div
+      className={css(
+        styles.pageHeaderToolsItem,
+        isSelected && styles.modifiers.selected,
+        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+        className
+      )}
+      id={id}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
 PageHeaderToolsItem.displayName = 'PageHeaderToolsItem';
diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx
index 206e421da3c..a748ca50531 100644
--- a/packages/react-core/src/components/Page/PageSidebar.tsx
+++ b/packages/react-core/src/components/Page/PageSidebar.tsx
@@ -22,10 +22,10 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
 export interface PageSidebarContextProps {
   isNavOpen: boolean;
 }
-
-export const PageSidebarContext = React.createContext<Partial<PageSidebarContextProps>>({
+export const pageSidebarContextDefaults: PageSidebarContextProps = {
   isNavOpen: true
-});
+};
+export const PageSidebarContext = React.createContext<Partial<PageSidebarContextProps>>(pageSidebarContextDefaults);
 
 export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap
index 6eee9cd6f90..61054dc7758 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap
@@ -4,9 +4,11 @@ exports[`Page should match snapshot (auto-generated) 1`] = `
 <ContextProvider
   value={
     Object {
+      "getBreakpoint": [Function],
       "isManagedSidebar": false,
       "isNavOpen": false,
       "onNavToggle": [Function],
+      "width": null,
     }
   }
 >
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 63f1fdb5907..a689723142d 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Check dark page against snapshot 1`] = `
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -29,7 +30,7 @@ exports[`Check dark page against snapshot 1`] = `
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -119,6 +120,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -141,7 +143,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -232,6 +234,7 @@ exports[`Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`]
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -254,7 +257,7 @@ exports[`Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`]
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -510,6 +513,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
   breadcrumb={<PageBreadcrumb />}
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -532,7 +536,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -787,6 +791,7 @@ exports[`Check page to verify grouped nav and breadcrumb - new components syntax
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -809,7 +814,7 @@ exports[`Check page to verify grouped nav and breadcrumb - new components syntax
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -1295,6 +1300,7 @@ exports[`Check page to verify grouped nav and breadcrumb - old / props syntax 1`
   }
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   groupProps={
     Object {
       "hasShadowTop": true,
@@ -1367,7 +1373,7 @@ exports[`Check page to verify grouped nav and breadcrumb - old / props syntax 1`
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -1831,6 +1837,7 @@ exports[`Check page to verify nav is created - PageNavigation syntax 1`] = `
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -1853,7 +1860,7 @@ exports[`Check page to verify nav is created - PageNavigation syntax 1`] = `
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
@@ -2165,6 +2172,7 @@ exports[`Check page to verify skip to content points to main content region 1`]
   }
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -2196,7 +2204,7 @@ exports[`Check page to verify skip to content points to main content region 1`]
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <SkipToContent
@@ -2461,6 +2469,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
   aria-label="Page layout"
   className="my-page-class"
   defaultManagedSidebarIsOpen={true}
+  getBreakpoint={[Function]}
   header={
     <PageHeader
       headerTools="PageHeaderTools | Avatar"
@@ -2484,7 +2493,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
 >
   <div
     aria-label="Page layout"
-    className="pf-c-page my-page-class"
+    className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
     id="PageId"
   >
     <PageHeader
diff --git a/packages/react-core/src/components/Toolbar/Toolbar.tsx b/packages/react-core/src/components/Toolbar/Toolbar.tsx
index 3971f7048ee..9a7df72f72f 100644
--- a/packages/react-core/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react-core/src/components/Toolbar/Toolbar.tsx
@@ -6,6 +6,7 @@ import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarChipGroupContent } from './ToolbarChipGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { PageContext } from '../Page/Page';
 
 export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Optional callback for clearing all filters in the toolbar */
@@ -139,46 +140,50 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
     const showClearFiltersButton = numberOfFilters > 0;
 
     return (
-      <div
-        className={css(
-          styles.toolbar,
-          isFullHeight && styles.modifiers.fullHeight,
-          isStatic && styles.modifiers.static,
-          usePageInsets && styles.modifiers.pageInsets,
-          isSticky && styles.modifiers.sticky,
-          formatBreakpointMods(inset, styles),
-          className
+      <PageContext.Consumer>
+        {({ width, getBreakpoint }) => (
+          <div
+            className={css(
+              styles.toolbar,
+              isFullHeight && styles.modifiers.fullHeight,
+              isStatic && styles.modifiers.static,
+              usePageInsets && styles.modifiers.pageInsets,
+              isSticky && styles.modifiers.sticky,
+              formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
+              className
+            )}
+            id={randomId}
+            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+            {...props}
+          >
+            <ToolbarContext.Provider
+              value={{
+                isExpanded,
+                toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
+                chipGroupContentRef: this.chipGroupContentRef,
+                updateNumberFilters: this.updateNumberFilters,
+                numberOfFilters,
+                clearAllFilters,
+                clearFiltersButtonText,
+                showClearFiltersButton,
+                toolbarId: randomId
+              }}
+            >
+              {children}
+              <ToolbarChipGroupContent
+                isExpanded={isExpanded}
+                chipGroupContentRef={this.chipGroupContentRef}
+                clearAllFilters={clearAllFilters}
+                showClearFiltersButton={showClearFiltersButton}
+                clearFiltersButtonText={clearFiltersButtonText}
+                numberOfFilters={numberOfFilters}
+                numberOfFiltersText={numberOfFiltersText}
+                collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
+              />
+            </ToolbarContext.Provider>
+          </div>
         )}
-        id={randomId}
-        {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...props}
-      >
-        <ToolbarContext.Provider
-          value={{
-            isExpanded,
-            toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
-            chipGroupContentRef: this.chipGroupContentRef,
-            updateNumberFilters: this.updateNumberFilters,
-            numberOfFilters,
-            clearAllFilters,
-            clearFiltersButtonText,
-            showClearFiltersButton,
-            toolbarId: randomId
-          }}
-        >
-          {children}
-          <ToolbarChipGroupContent
-            isExpanded={isExpanded}
-            chipGroupContentRef={this.chipGroupContentRef}
-            clearAllFilters={clearAllFilters}
-            showClearFiltersButton={showClearFiltersButton}
-            clearFiltersButtonText={clearFiltersButtonText}
-            numberOfFilters={numberOfFilters}
-            numberOfFiltersText={numberOfFiltersText}
-            collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
-          />
-        </ToolbarContext.Provider>
-      </div>
+      </PageContext.Consumer>
     );
   };
 
diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
index df0a2e0d9b7..6ccbd675170 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { formatBreakpointMods } from '../../helpers/util';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
+import { PageContext } from '../Page/Page';
 
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
@@ -81,47 +82,51 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
     }
 
     return (
-      <div
-        className={css(
-          styles.toolbarContent,
-          formatBreakpointMods(visibility || visiblity, styles),
-          formatBreakpointMods(alignment, styles),
-          className
+      <PageContext.Consumer>
+        {({ width, getBreakpoint }) => (
+          <div
+            className={css(
+              styles.toolbarContent,
+              formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+              className
+            )}
+            {...props}
+          >
+            <ToolbarContext.Consumer>
+              {({
+                clearAllFilters: clearAllFiltersContext,
+                clearFiltersButtonText: clearFiltersButtonContext,
+                showClearFiltersButton: showClearFiltersButtonContext,
+                toolbarId: toolbarIdContext
+              }) => {
+                const expandableContentId = `${toolbarId ||
+                  toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+                return (
+                  <ToolbarContentContext.Provider
+                    value={{
+                      expandableContentRef: this.expandableContentRef,
+                      expandableContentId,
+                      chipContainerRef: this.chipContainerRef
+                    }}
+                  >
+                    <div className={css(styles.toolbarContentSection)}>{children}</div>
+                    <ToolbarExpandableContent
+                      id={expandableContentId}
+                      isExpanded={isExpanded}
+                      expandableContentRef={this.expandableContentRef}
+                      chipContainerRef={this.chipContainerRef}
+                      clearAllFilters={clearAllFilters || clearAllFiltersContext}
+                      showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
+                      clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
+                    />
+                  </ToolbarContentContext.Provider>
+                );
+              }}
+            </ToolbarContext.Consumer>
+          </div>
         )}
-        {...props}
-      >
-        <ToolbarContext.Consumer>
-          {({
-            clearAllFilters: clearAllFiltersContext,
-            clearFiltersButtonText: clearFiltersButtonContext,
-            showClearFiltersButton: showClearFiltersButtonContext,
-            toolbarId: toolbarIdContext
-          }) => {
-            const expandableContentId = `${toolbarId ||
-              toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
-            return (
-              <ToolbarContentContext.Provider
-                value={{
-                  expandableContentRef: this.expandableContentRef,
-                  expandableContentId,
-                  chipContainerRef: this.chipContainerRef
-                }}
-              >
-                <div className={css(styles.toolbarContentSection)}>{children}</div>
-                <ToolbarExpandableContent
-                  id={expandableContentId}
-                  isExpanded={isExpanded}
-                  expandableContentRef={this.expandableContentRef}
-                  chipContainerRef={this.chipContainerRef}
-                  clearAllFilters={clearAllFilters || clearAllFiltersContext}
-                  showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
-                  clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                />
-              </ToolbarContentContext.Provider>
-            );
-          }}
-        </ToolbarContext.Consumer>
-      </div>
+      </PageContext.Consumer>
     );
   }
 }
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 2d106d7e91d..a387885fa33 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
@@ -84,21 +85,25 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
     }
 
     return (
-      <div
-        className={css(
-          styles.toolbarGroup,
-          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
-          formatBreakpointMods(visibility || visiblity, styles),
-          formatBreakpointMods(alignment, styles),
-          formatBreakpointMods(spacer, styles),
-          formatBreakpointMods(spaceItems, styles),
-          className
+      <PageContext.Consumer>
+        {({ width, getBreakpoint }) => (
+          <div
+            className={css(
+              styles.toolbarGroup,
+              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+              formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              className
+            )}
+            {...props}
+            ref={innerRef}
+          >
+            {children}
+          </div>
         )}
-        {...props}
-        ref={innerRef}
-      >
-        {children}
-      </div>
+      </PageContext.Consumer>
     );
   }
 }
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index 9be93a7d39d..1f1a1daf0e6 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
+import { PageContext } from '../Page/Page';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
@@ -113,26 +114,36 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   }
 
   return (
-    <div
-      className={css(
-        styles.toolbarItem,
-        variant &&
-          styles.modifiers[
-            toCamel(variant) as 'bulkSelect' | 'overflowMenu' | 'pagination' | 'searchFilter' | 'label' | 'chipGroup'
-          ],
-        isAllExpanded && styles.modifiers.expanded,
-        formatBreakpointMods(visibility || visiblity, styles),
-        formatBreakpointMods(alignment, styles),
-        formatBreakpointMods(spacer, styles),
-        className
+    <PageContext.Consumer>
+      {({ width, getBreakpoint }) => (
+        <div
+          className={css(
+            styles.toolbarItem,
+            variant &&
+              styles.modifiers[
+                toCamel(variant) as
+                  | 'bulkSelect'
+                  | 'overflowMenu'
+                  | 'pagination'
+                  | 'searchFilter'
+                  | 'label'
+                  | 'chipGroup'
+              ],
+            isAllExpanded && styles.modifiers.expanded,
+            formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            className
+          )}
+          {...(variant === 'label' && { 'aria-hidden': true })}
+          id={id}
+          {...props}
+          {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
+        >
+          {children}
+        </div>
       )}
-      {...(variant === 'label' && { 'aria-hidden': true })}
-      id={id}
-      {...props}
-      {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
-    >
-      {children}
-    </div>
+    </PageContext.Consumer>
   );
 };
 ToolbarItem.displayName = 'ToolbarItem';
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
index 32111a54f0f..70c37a351d5 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -6,7 +6,8 @@ import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import { formatBreakpointMods, toCamel, capitalize, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** An icon to be rendered when the toggle group has collapsed down */
@@ -92,61 +93,67 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
     }
 
     return (
-      <ToolbarContext.Consumer>
-        {({ isExpanded, toggleIsExpanded }) => (
-          <ToolbarContentContext.Consumer>
-            {({ expandableContentRef, expandableContentId }) => {
-              if (expandableContentRef.current && expandableContentRef.current.classList) {
-                if (isExpanded) {
-                  expandableContentRef.current.classList.add(styles.modifiers.expanded);
-                } else {
-                  expandableContentRef.current.classList.remove(styles.modifiers.expanded);
-                }
-              }
+      <PageContext.Consumer>
+        {({ width, getBreakpoint }) => (
+          <ToolbarContext.Consumer>
+            {({ isExpanded, toggleIsExpanded }) => (
+              <ToolbarContentContext.Consumer>
+                {({ expandableContentRef, expandableContentId }) => {
+                  if (expandableContentRef.current && expandableContentRef.current.classList) {
+                    if (isExpanded) {
+                      expandableContentRef.current.classList.add(styles.modifiers.expanded);
+                    } else {
+                      expandableContentRef.current.classList.remove(styles.modifiers.expanded);
+                    }
+                  }
 
-              return (
-                <div
-                  className={css(
-                    styles.toolbarGroup,
-                    styles.modifiers.toggleGroup,
-                    variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
-                    breakpoint &&
-                      styles.modifiers[
-                        `showOn${capitalize(breakpoint.replace('2xl', '_2xl'))}` as
-                          | 'showOnMd'
-                          | 'showOnLg'
-                          | 'showOnXl'
-                          | 'showOn_2xl'
-                      ],
-                    formatBreakpointMods(visibility || visiblity, styles),
-                    formatBreakpointMods(alignment, styles),
-                    formatBreakpointMods(spacer, styles),
-                    formatBreakpointMods(spaceItems, styles),
-                    className
-                  )}
-                  {...props}
-                >
-                  <div className={css(styles.toolbarToggle)}>
-                    <Button
-                      variant="plain"
-                      onClick={toggleIsExpanded}
-                      aria-label="Show Filters"
-                      {...(isExpanded && { 'aria-expanded': true })}
-                      aria-haspopup={isExpanded && this.isContentPopup()}
-                      aria-controls={expandableContentId}
+                  const breakpointMod: {
+                    md?: 'show';
+                    lg?: 'show';
+                    xl?: 'show';
+                    '2xl'?: 'show';
+                  } = {};
+                  breakpointMod[breakpoint] = 'show';
+
+                  return (
+                    <div
+                      className={css(
+                        styles.toolbarGroup,
+                        styles.modifiers.toggleGroup,
+                        variant &&
+                          styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+                        formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
+                        formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+                        formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+                        formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+                        formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+                        className
+                      )}
+                      {...props}
                     >
-                      {toggleIcon}
-                    </Button>
-                  </div>
-                  {isExpanded
-                    ? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
-                    : children}
-                </div>
-              );
-            }}
-          </ToolbarContentContext.Consumer>
+                      <div className={css(styles.toolbarToggle)}>
+                        <Button
+                          variant="plain"
+                          onClick={toggleIsExpanded}
+                          aria-label="Show Filters"
+                          {...(isExpanded && { 'aria-expanded': true })}
+                          aria-haspopup={isExpanded && this.isContentPopup()}
+                          aria-controls={expandableContentId}
+                        >
+                          {toggleIcon}
+                        </Button>
+                      </div>
+                      {isExpanded
+                        ? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
+                        : children}
+                    </div>
+                  );
+                }}
+              </ToolbarContentContext.Consumer>
+            )}
+          </ToolbarContext.Consumer>
         )}
-      </ToolbarContext.Consumer>
+      </PageContext.Consumer>
     );
   }
 }
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap
index 65e2a667afa..0349c1743ec 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap
@@ -1,47 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Toolbar should match snapshot (auto-generated) 1`] = `
-<div
-  className="pf-c-toolbar string"
-  data-ouia-component-id="OUIA-Generated-Toolbar-1"
-  data-ouia-component-type="PF4/Toolbar"
-  data-ouia-safe={true}
-  id="string"
->
-  <ContextProvider
-    value={
-      Object {
-        "chipGroupContentRef": Object {
-          "current": null,
-        },
-        "clearAllFilters": [Function],
-        "clearFiltersButtonText": "string",
-        "isExpanded": true,
-        "numberOfFilters": 0,
-        "showClearFiltersButton": false,
-        "toggleIsExpanded": [Function],
-        "toolbarId": "string",
-        "updateNumberFilters": [Function],
-      }
-    }
-  >
-    <div>
-      ReactNode
-    </div>
-    <ToolbarChipGroupContent
-      chipGroupContentRef={
-        Object {
-          "current": null,
-        }
-      }
-      clearAllFilters={[Function]}
-      clearFiltersButtonText="string"
-      collapseListedFiltersBreakpoint="md"
-      isExpanded={true}
-      numberOfFilters={0}
-      numberOfFiltersText={[Function]}
-      showClearFiltersButton={false}
-    />
-  </ContextProvider>
-</div>
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
 `;
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
index 292de1a8bce..1375f7445c6 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
@@ -1,11 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ToolbarContent should match snapshot (auto-generated) 1`] = `
-<div
-  className="pf-c-toolbar__content string"
->
-  <ContextConsumer>
-    <Component />
-  </ContextConsumer>
-</div>
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
 `;
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarItem.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarItem.test.tsx.snap
index cb584c8321f..e39674109a9 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarItem.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarItem.test.tsx.snap
@@ -1,12 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ToolbarItem should match snapshot (auto-generated) 1`] = `
-<div
-  className="pf-c-toolbar__item pf-m-bulk-select string"
-  id="string"
->
-  <div>
-    ReactNode
-  </div>
-</div>
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
 `;
diff --git a/packages/react-core/src/demos/Page/Page.md b/packages/react-core/src/demos/Page/Page.md
index 20d55357553..1b1cdcbc9e5 100644
--- a/packages/react-core/src/demos/Page/Page.md
+++ b/packages/react-core/src/demos/Page/Page.md
@@ -11,6 +11,7 @@ import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg'
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 
 - All but the last example set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
@@ -38,6 +39,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Checkbox,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -66,13 +68,21 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
 } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
@@ -84,7 +94,8 @@ class PageLayoutGrouped extends React.Component {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
       isFullKebabDropdownOpen: false,
-      activeItem: 0
+      activeItem: 0,
+      isDrawerExpanded: false
     };
     this.onDropdownToggle = isDropdownOpen => {
       this.setState({
@@ -127,10 +138,23 @@ class PageLayoutGrouped extends React.Component {
         isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
       });
     };
+
+    this.onDrawerToggle = () => {
+      const isDrawerExpanded = !this.state.isDrawerExpanded;
+      this.setState({
+        isDrawerExpanded
+      });
+    };
+
+    this.onDrawerClose = () => {
+      this.setState({
+        isDrawerExpanded: false
+      });
+    };
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state;
 
     const PageNav = (
       <Nav variant="tertiary" onSelect={this.onNavSelect} aria-label="Nav">
@@ -198,6 +222,11 @@ class PageLayoutGrouped extends React.Component {
             alignment={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
+            <ToolbarItem>
+              <Button aria-label="Toggle drawer" variant={ButtonVariant.plain} onClick={this.onDrawerToggle}>
+                <LightbulbIcon color={isDrawerExpanded ? 'yellow' : 'currentColor'} />
+              </Button>
+            </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Notifications" variant={ButtonVariant.plain}>
                 <AttentionBellIcon />
@@ -283,47 +312,67 @@ class PageLayoutGrouped extends React.Component {
       </Breadcrumb>
     );
 
+    const panelContent = (
+      <DrawerPanelContent isResizable>
+        <DrawerHead>
+          <span tabIndex={isDrawerExpanded ? 0 : -1}>
+            drawer-panel
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onDrawerClose} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const Sidebar = <PageSidebar nav="Navigation" />;
+
     return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          breadcrumb={PageBreadcrumb}
-          tertiaryNav={PageNav}
-          isManagedSidebar
-          isTertiaryNavWidthLimited
-          isBreadcrumbWidthLimited
-          skipToContent={PageSkipToContent}
-          mainContainerId={pageId}
-          isTertiaryNavGrouped
-          isBreadcrumbGrouped
-          additionalGroupedContent={
-            <PageSection variant={PageSectionVariants.light}>
-              <TextContent>
-                <Text component="h1">Main title</Text>
-                <Text component="p">
-                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-                  of its relative line height of 1.5.
-                </Text>
-              </TextContent>
-            </PageSection>
-          }
-          groupProps={{
-            sticky: 'top'
-          }}
-        >
-          <PageSection>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(20)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </Page>
-      </React.Fragment>
+      <Drawer isExpanded={isDrawerExpanded} isInline onExpand={this.onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>
+            <Page
+              header={Header}
+              breadcrumb={PageBreadcrumb}
+              sidebar={Sidebar}
+              tertiaryNav={PageNav}
+              isManagedSidebar
+              isTertiaryNavWidthLimited
+              isBreadcrumbWidthLimited
+              skipToContent={PageSkipToContent}
+              mainContainerId={pageId}
+              isTertiaryNavGrouped
+              isBreadcrumbGrouped
+              additionalGroupedContent={
+                <PageSection variant={PageSectionVariants.light}>
+                  <TextContent>
+                    <Text component="h1">Main title</Text>
+                    <Text component="p">
+                      Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+                      of its relative line height of 1.5.
+                    </Text>
+                  </TextContent>
+                </PageSection>
+              }
+              groupProps={{
+                sticky: 'top'
+              }}
+            >
+              <PageSection>
+                <Gallery hasGutter>
+                  {Array.apply(0, Array(20)).map((x, i) => (
+                    <GalleryItem key={i}>
+                      <Card>
+                        <CardBody>This is a card</CardBody>
+                      </Card>
+                    </GalleryItem>
+                  ))}
+                </Gallery>
+              </PageSection>
+            </Page>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
     );
   }
 }
diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts
index 603876f0b1f..d9bc15a1a8e 100644
--- a/packages/react-core/src/helpers/util.ts
+++ b/packages/react-core/src/helpers/util.ts
@@ -262,6 +262,16 @@ export const setBreakpointCssVars = (
     {}
   );
 
+export interface Mods {
+  default?: string;
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+  '2xl'?: string;
+  '3xl'?: string;
+}
+
 /**
  * This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
  *
@@ -269,25 +279,64 @@ export const setBreakpointCssVars = (
  * @param {any} styles The appropriate styles object for the component
  */
 export const formatBreakpointMods = (
-  mods: {
-    default?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    '2xl'?: string;
-    '3xl'?: string;
-  },
+  mods: Mods,
   styles: any,
-  stylePrefix: string = ''
-) =>
-  Object.entries(mods || {})
+  stylePrefix: string = '',
+  breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+) => {
+  if (!mods) {
+    return '';
+  }
+  if (breakpoint) {
+    if (breakpoint in mods) {
+      return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpoint as keyof Mods]}`)];
+    }
+    // the current breakpoint is not specified in mods, so we try to find the next nearest
+    const breakpointsOrder = ['2xl', 'xl', 'lg', 'md', 'sm', 'default'];
+    const breakpointsIndex = breakpointsOrder.indexOf(breakpoint);
+    for (let i = breakpointsIndex; i < breakpointsOrder.length; i++) {
+      if (breakpointsOrder[i] in mods) {
+        return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpointsOrder[i] as keyof Mods]}`)];
+      }
+    }
+    return '';
+  }
+  return Object.entries(mods || {})
     .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`)
     .map(toCamel)
     .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
     .map(modifierKey => styles.modifiers[modifierKey])
     .filter(Boolean)
     .join(' ');
+};
+
+/**
+ * Return the breakpoint for the given width
+ *
+ * @param {number | null} width The width to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export const getBreakpoint = (width: number): 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' => {
+  if (width === null) {
+    return null;
+  }
+  if (width >= 1450) {
+    return '2xl';
+  }
+  if (width >= 1200) {
+    return 'xl';
+  }
+  if (width >= 992) {
+    return 'lg';
+  }
+  if (width >= 768) {
+    return 'md';
+  }
+  if (width >= 576) {
+    return 'sm';
+  }
+  return 'default';
+};
 
 const camelize = (s: string) =>
   s
diff --git a/packages/react-integration/cypress/integration/page.spec.ts b/packages/react-integration/cypress/integration/page.spec.ts
index 2cd0eac17cc..943421dbf07 100644
--- a/packages/react-integration/cypress/integration/page.spec.ts
+++ b/packages/react-integration/cypress/integration/page.spec.ts
@@ -22,11 +22,6 @@ describe('Page Demo Test', () => {
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-no-padding').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-no-padding-on-md').should('exist');
-      cy.get('.pf-c-page__header-tools-item[id="kebab-dropdown"]').should('have.class', 'pf-m-hidden-on-lg');
-      cy.get('.pf-c-page__header-tools-item[id="user-dropdown"]').should(
-        'have.class',
-        'pf-m-hidden pf-m-visible-on-md pf-m-visible-on-lg pf-m-visible-on-xl pf-m-visible-on-2xl'
-      );
     });
   });
 });
diff --git a/packages/react-integration/cypress/integration/toolbar.spec.ts b/packages/react-integration/cypress/integration/toolbar.spec.ts
index daec10f1b6c..a7742e4d55e 100644
--- a/packages/react-integration/cypress/integration/toolbar.spec.ts
+++ b/packages/react-integration/cypress/integration/toolbar.spec.ts
@@ -11,52 +11,29 @@ describe('Data Toolbar Demo Test', () => {
     );
   });
 
-  it('Verify no inset applied for all viewport sizes ', () => {
+  it('Verify no inset applied for default viewport size (1200) ', () => {
     cy.get('#toolbar-no-inset.pf-m-inset-none').should('exist');
-    cy.get('#toolbar-no-inset.pf-m-inset-none-on-md').should('exist');
-    cy.get('#toolbar-no-inset.pf-m-inset-none-on-lg').should('exist');
-    cy.get('#toolbar-no-inset.pf-m-inset-none-on-xl').should('exist');
-    cy.get('#toolbar-no-inset.pf-m-inset-none-on-2xl').should('exist');
   });
 
-  it('Verify Small inset applied for all viewport sizes ', () => {
+  it('Verify Small inset applied for default viewport size (1200) ', () => {
     cy.get('#toolbar-sm-inset.pf-m-inset-sm').should('exist');
-    cy.get('#toolbar-sm-inset.pf-m-inset-sm-on-md').should('exist');
-    cy.get('#toolbar-sm-inset.pf-m-inset-sm-on-lg').should('exist');
-    cy.get('#toolbar-sm-inset.pf-m-inset-sm-on-xl').should('exist');
-    cy.get('#toolbar-sm-inset.pf-m-inset-sm-on-2xl').should('exist');
   });
 
-  it('Verify Medium inset applied for all viewport sizes ', () => {
+  it('Verify Medium inset applied for default viewport size (1200) ', () => {
     cy.get('#toolbar-md-inset.pf-m-inset-md').should('exist');
-    cy.get('#toolbar-md-inset.pf-m-inset-md-on-md').should('exist');
-    cy.get('#toolbar-md-inset.pf-m-inset-md-on-lg').should('exist');
-    cy.get('#toolbar-md-inset.pf-m-inset-md-on-xl').should('exist');
-    cy.get('#toolbar-md-inset.pf-m-inset-md-on-2xl').should('exist');
   });
 
-  it('Verify Large inset applied for all viewport sizes ', () => {
+  it('Verify Large inset applied for default viewport size (1200) ', () => {
     cy.get('#toolbar-lg-inset.pf-m-inset-lg').should('exist');
-    cy.get('#toolbar-lg-inset.pf-m-inset-lg-on-md').should('exist');
-    cy.get('#toolbar-lg-inset.pf-m-inset-lg-on-lg').should('exist');
-    cy.get('#toolbar-lg-inset.pf-m-inset-lg-on-xl').should('exist');
-    cy.get('#toolbar-lg-inset.pf-m-inset-lg-on-2xl').should('exist');
   });
 
-  it('Verify Extra Large inset applied for all viewport sizes ', () => {
+  it('Verify Extra Large inset applied for default viewport size (1200) ', () => {
     cy.get('#toolbar-xl-inset.pf-m-inset-xl').should('exist');
-    cy.get('#toolbar-xl-inset.pf-m-inset-xl-on-md').should('exist');
-    cy.get('#toolbar-xl-inset.pf-m-inset-xl-on-lg').should('exist');
-    cy.get('#toolbar-xl-inset.pf-m-inset-xl-on-xl').should('exist');
-    cy.get('#toolbar-xl-inset.pf-m-inset-xl-on-2xl').should('exist');
   });
 
-  it('Verify 2XL inset applied for all viewport sizes ', () => {
-    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl').should('exist');
-    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl-on-md').should('exist');
-    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl-on-lg').should('exist');
-    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl-on-xl').should('exist');
-    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl-on-2xl').should('exist');
+  it('Verify 2XL inset applied for default viewport size (1200) ', () => {
+    // 2xl should only be added for viewport size >= 1450
+    cy.get('#toolbar-2xl-inset.pf-m-inset-2xl').should('not.exist');
   });
 
   describe('Toggle group and filter chips are appropriately responsive', () => {