diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx
index c79e8d2f4f1..74ec1e523fe 100644
--- a/packages/react-core/src/components/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/NavExpandable.tsx
@@ -125,13 +125,13 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
             {...props}
           >
             <PageSidebarContext.Consumer>
-              {({ isNavOpen }) => (
+              {({ isSidebarOpen }) => (
                 <button
                   className={styles.navLink}
                   id={srText ? null : this.id}
                   onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
-                  tabIndex={isNavOpen ? null : -1}
+                  tabIndex={isSidebarOpen ? null : -1}
                   {...buttonProps}
                 >
                   {title}
diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx
index 68e57f8b1a9..28ed69533cb 100644
--- a/packages/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/react-core/src/components/Nav/NavItem.tsx
@@ -59,7 +59,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
-  const { isNavOpen } = React.useContext(PageSidebarContext);
+  const { isSidebarOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
   const ref = React.useRef<HTMLLIElement>();
@@ -166,7 +166,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     'aria-expanded': flyoutVisible
   };
 
-  const tabIndex = isNavOpen ? null : -1;
+  const tabIndex = isSidebarOpen ? null : -1;
 
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 852de0b3b59..b1a543851bb 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -108,7 +108,7 @@ export class NavList extends React.Component<NavListProps> {
       <NavContext.Consumer>
         {({ isHorizontal }) => (
           <PageSidebarContext.Consumer>
-            {({ isNavOpen }) => (
+            {({ isSidebarOpen }) => (
               <React.Fragment>
                 {isHorizontal && (
                   <button
@@ -116,7 +116,7 @@ export class NavList extends React.Component<NavListProps> {
                     aria-label={ariaLeftScroll}
                     onClick={this.scrollLeft}
                     disabled={scrollViewAtStart}
-                    tabIndex={isNavOpen ? null : -1}
+                    tabIndex={isSidebarOpen ? null : -1}
                   >
                     <AngleLeftIcon />
                   </button>
@@ -136,7 +136,7 @@ export class NavList extends React.Component<NavListProps> {
                     aria-label={ariaRightScroll}
                     onClick={this.scrollRight}
                     disabled={scrollViewAtEnd}
-                    tabIndex={isNavOpen ? null : -1}
+                    tabIndex={isSidebarOpen ? null : -1}
                   >
                     <AngleRightIcon />
                   </button>
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 86f5bf07cf6..8128a04df0f 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -40,8 +40,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** tabIndex to use for the [role="main"] element, null to unset it */
   mainTabIndex?: number | null;
   /**
-   * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the Masthead component
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Flag indicating if tertiary nav width should be limited */
@@ -51,7 +51,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    */
   defaultManagedSidebarIsOpen?: boolean;
   /**
-   * Can add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px
+   * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
    * Returns object { mobileView: boolean, windowSize: number }
    */
   onPageResize?: ((object: any) => void) | null;
@@ -88,8 +88,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export interface PageState {
-  desktopIsNavOpen: boolean;
-  mobileIsNavOpen: boolean;
+  desktopIsSidebarOpen: boolean;
+  mobileIsSidebarOpen: boolean;
   mobileView: boolean;
   width: number;
   height: number;
@@ -117,8 +117,8 @@ export class Page extends React.Component<PageProps, PageState> {
     const { isManagedSidebar, defaultManagedSidebarIsOpen } = props;
     const managedSidebarOpen = !isManagedSidebar ? true : defaultManagedSidebarIsOpen;
     this.state = {
-      desktopIsNavOpen: managedSidebarOpen,
-      mobileIsNavOpen: false,
+      desktopIsSidebarOpen: managedSidebarOpen,
+      mobileIsSidebarOpen: false,
       mobileView: false,
       width: null,
       height: null
@@ -188,20 +188,20 @@ export class Page extends React.Component<PageProps, PageState> {
   handleResize = debounce(this.resize, 250);
 
   handleMainClick = () => {
-    if (this.isMobile() && this.state.mobileIsNavOpen && this.mainRef.current) {
-      this.setState({ mobileIsNavOpen: false });
+    if (this.isMobile() && this.state.mobileIsSidebarOpen && this.mainRef.current) {
+      this.setState({ mobileIsSidebarOpen: false });
     }
   };
 
-  onNavToggleMobile = () => {
-    this.setState(prevState => ({
-      mobileIsNavOpen: !prevState.mobileIsNavOpen
+  onSidebarToggleMobile = () => {
+    this.setState((prevState) => ({
+      mobileIsSidebarOpen: !prevState.mobileIsSidebarOpen
     }));
   };
 
-  onNavToggleDesktop = () => {
-    this.setState(prevState => ({
-      desktopIsNavOpen: !prevState.desktopIsNavOpen
+  onSidebarToggleDesktop = () => {
+    this.setState((prevState) => ({
+      desktopIsSidebarOpen: !prevState.desktopIsSidebarOpen
     }));
   };
 
@@ -237,12 +237,12 @@ export class Page extends React.Component<PageProps, PageState> {
       breadcrumbProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width, height } = this.state;
+    const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
 
     const context = {
       isManagedSidebar,
-      onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
-      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
+      onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
+      isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
       width,
       height,
       getBreakpoint,
diff --git a/packages/react-core/src/components/Page/PageContext.tsx b/packages/react-core/src/components/Page/PageContext.tsx
index 50765ab888c..c3d17dd4489 100644
--- a/packages/react-core/src/components/Page/PageContext.tsx
+++ b/packages/react-core/src/components/Page/PageContext.tsx
@@ -3,8 +3,8 @@ import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 
 export interface PageContextProps {
   isManagedSidebar: boolean;
-  onNavToggle: () => void;
-  isNavOpen: boolean;
+  onSidebarToggle: () => void;
+  isSidebarOpen: boolean;
   width: number;
   height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -13,8 +13,8 @@ export interface PageContextProps {
 
 export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
-  isNavOpen: false,
-  onNavToggle: () => null,
+  isSidebarOpen: false,
+  onSidebarToggle: () => null,
   width: null,
   height: null,
   getBreakpoint,
diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx
index e7572fbff72..8e5f6a610a9 100644
--- a/packages/react-core/src/components/Page/PageSidebar.tsx
+++ b/packages/react-core/src/components/Page/PageSidebar.tsx
@@ -6,15 +6,15 @@ import { PageContextConsumer } from './PageContext';
 export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page sidebar */
   className?: string;
-  /** Component to render the side navigation (e.g. <Nav /> */
-  nav?: React.ReactNode;
+  /** Content rendered inside the page sidebar (e.g. <PageSidebarBody /> */
+  children?: React.ReactNode;
   /**
-   * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the PageHeader component
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the PageHeader component
    */
   isManagedSidebar?: boolean;
-  /** Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
-  isNavOpen?: boolean;
+  /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
+  isSidebarOpen?: boolean;
   /** Indicates the color scheme of the sidebar */
   theme?: 'dark' | 'light';
   /** Sidebar id */
@@ -22,24 +22,24 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export interface PageSidebarContextProps {
-  isNavOpen: boolean;
+  isSidebarOpen: boolean;
 }
 export const pageSidebarContextDefaults: PageSidebarContextProps = {
-  isNavOpen: true
+  isSidebarOpen: true
 };
 export const PageSidebarContext = React.createContext<Partial<PageSidebarContextProps>>(pageSidebarContextDefaults);
 
 export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
-  nav,
-  isNavOpen = true,
+  children,
+  isSidebarOpen = true,
   theme = 'dark',
   id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, isNavOpen: managedIsNavOpen }: PageSidebarProps) => {
-      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
+      const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
 
       return (
         <div
@@ -47,16 +47,14 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           className={css(
             styles.pageSidebar,
             theme === 'light' && styles.modifiers.light,
-            navOpen && styles.modifiers.expanded,
-            !navOpen && styles.modifiers.collapsed,
+            sidebarOpen && styles.modifiers.expanded,
+            !sidebarOpen && styles.modifiers.collapsed,
             className
           )}
-          aria-hidden={!navOpen}
+          aria-hidden={!sidebarOpen}
           {...props}
         >
-          <div className={css(styles.pageSidebarBody)}>
-            <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
-          </div>
+          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>{children}</PageSidebarContext.Provider>
         </div>
       );
     }}
diff --git a/packages/react-core/src/components/Page/PageSidebarBody.tsx b/packages/react-core/src/components/Page/PageSidebarBody.tsx
new file mode 100644
index 00000000000..b9d0375e767
--- /dev/null
+++ b/packages/react-core/src/components/Page/PageSidebarBody.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the page sidebar body */
+  children?: React.ReactNode;
+  /** Additional classes added to the page sidebar body */
+  className?: string;
+  /** Flag indicating that the page sidebar body should use page insets. */
+  usePageInsets?: boolean;
+  /** Flag indicating that the page sidebar body should fill the available vertical space. */
+  isFilled?: boolean;
+}
+
+export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
+  children,
+  className,
+  usePageInsets,
+  isFilled,
+  ...props
+}: PageSidebarBodyProps) => (
+  <div
+    className={css(
+      styles.pageSidebarBody,
+      usePageInsets && styles.modifiers.pageInsets,
+      isFilled === false && styles.modifiers.noFill,
+      isFilled === true && styles.modifiers.fill,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+PageSidebarBody.displayName = 'PageSidebarBody';
diff --git a/packages/react-core/src/components/Page/PageToggleButton.tsx b/packages/react-core/src/components/Page/PageToggleButton.tsx
index ddcb9513945..d91c02a36a1 100644
--- a/packages/react-core/src/components/Page/PageToggleButton.tsx
+++ b/packages/react-core/src/components/Page/PageToggleButton.tsx
@@ -6,32 +6,36 @@ import { PageContextConsumer, PageContextProps } from './PageContext';
 export interface PageToggleButtonProps extends ButtonProps {
   /** Content of the page toggle button */
   children?: React.ReactNode;
-  /** True if the side nav is shown  */
-  isNavOpen?: boolean;
-  /** Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
-  onNavToggle?: () => void;
+  /** True if the sidebar is shown  */
+  isSidebarOpen?: boolean;
+  /** Callback function to handle the sidebar toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
+  onSidebarToggle?: () => void;
   /** Button id */
   id?: string;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
   children,
-  isNavOpen = true,
-  onNavToggle = () => undefined as any,
+  isSidebarOpen = true,
+  onSidebarToggle = () => undefined as any,
   id = 'nav-toggle',
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }: PageContextProps) => {
-      const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
-      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+    {({
+      isManagedSidebar,
+      onSidebarToggle: managedOnSidebarToggle,
+      isSidebarOpen: managedIsSidebarOpen
+    }: PageContextProps) => {
+      const sidebarToggle = isManagedSidebar ? managedOnSidebarToggle : onSidebarToggle;
+      const sidebarOpen = isManagedSidebar ? managedIsSidebarOpen : isSidebarOpen;
 
       return (
         <Button
           id={id}
-          onClick={navToggle}
+          onClick={sidebarToggle}
           aria-label="Side navigation toggle"
-          aria-expanded={navOpen ? 'true' : 'false'}
+          aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
           {...props}
         >
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
index fd1b3b9b561..6653c233175 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
@@ -9,7 +9,9 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageSidebar className={"''"} nav={<div>ReactNode</div>} isManagedSidebar={true} isNavOpen={true} theme={'dark'} />
+    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true} theme={'dark'}>
+      <div>ReactNode</div>
+    </PageSidebar>
   );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
index a2017c6bb8a..e708501efdf 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
@@ -7,12 +7,8 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     class="pf-c-page__sidebar pf-m-expanded ''"
     id="page-sidebar"
   >
-    <div
-      class="pf-c-page__sidebar-body"
-    >
-      <div>
-        ReactNode
-      </div>
+    <div>
+      ReactNode
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 80f30bf9c35..4bcee0f4cc8 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { Page } from '../Page';
 import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
+import { PageSidebarBody } from '../PageSidebarBody';
 import { PageSection } from '../PageSection';
 import { Breadcrumb, BreadcrumbItem } from '../../Breadcrumb';
 import { Nav, NavList, NavItem } from '../../Nav';
@@ -22,7 +23,11 @@ const props = {
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen>
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    );
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -38,7 +43,11 @@ describe('Page', () => {
 
   test('Check dark page against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen theme="dark" />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen theme="dark">
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    );
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -54,7 +63,7 @@ describe('Page', () => {
 
   test('Check page horizontal layout example against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -70,7 +79,7 @@ describe('Page', () => {
 
   test('Check page to verify breadcrumb is created', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -97,7 +106,7 @@ describe('Page', () => {
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -130,7 +139,7 @@ describe('Page', () => {
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -165,7 +174,7 @@ describe('Page', () => {
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -192,7 +201,7 @@ describe('Page', () => {
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -219,7 +228,7 @@ describe('Page', () => {
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -248,7 +257,7 @@ describe('Page', () => {
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -278,7 +287,7 @@ describe('Page', () => {
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -320,7 +329,7 @@ describe('Page', () => {
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
         <Breadcrumb>
@@ -377,7 +386,7 @@ describe('Page', () => {
 
   test('Check page to verify skip to content points to main content region', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
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 b1d6ebb06d7..256c076cad9 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
@@ -91,11 +91,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -155,11 +151,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -317,11 +309,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -479,11 +467,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -757,11 +741,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1042,11 +1022,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1233,11 +1209,7 @@ exports[`Page Check page to verify skip to content points to main content region
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       id="main-content-page-layout-test-nav"
@@ -1457,11 +1429,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1619,11 +1587,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1781,11 +1745,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1943,11 +1903,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index 1737834c45f..27618f2b157 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -6,6 +6,7 @@ propComponents:
   [
     'Page',
     'PageSidebar',
+    'PageSidebarBody',
     'PageSection',
     'PageGroup',
     'PageBreadcrumb',
@@ -16,8 +17,8 @@ propComponents:
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import {
-  PageHeader,
-  PageHeaderTools
+PageHeader,
+PageHeaderTools
 } from '@patternfly/react-core/deprecated';
 import './page.css';
 
@@ -25,20 +26,21 @@ import './page.css';
 
 ### Basic page components
 
-A page will typically contain the following components: 
+A page will typically contain the following components:
 
 - A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`. 
-- A `<PageSidebar>` for vertical navigation 
+  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
+- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
 ### Vertical navigation
 
-To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, use the `nav` property of the `<PageSidebar>`. 
+To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
 
-The `isNavOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible. 
+The `isSidebarOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the sidebar is visible.
 
 ```ts file="./PageVerticalNav.tsx"
+
 ```
 
 ### Horizontal navigation
@@ -46,22 +48,25 @@ The `isNavOpen` property helps facilitate the opening and closing of the sidebar
 To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
 
 ```ts file="./PageHorizontalNav.tsx"
+
 ```
 
 ### Legacy tertiary navigation
 
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation. 
+[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
 
 Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
 
 ```ts file="./PageTertiaryNav.tsx"
+
 ```
 
 ### Uncontrolled navigation
 
-When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageToggleButton>`.
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
 
 ```ts file="./PageUncontrolledNav.tsx"
+
 ```
 
 ### Filled page sections
@@ -71,44 +76,47 @@ By default, the last page section is "filled", meaning it fills the available ve
 To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
 
 ```ts file="./PageWithOrWithoutFill.tsx"
+
 ```
 
 ### Main section padding
 
-To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’. 
+To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.
 
-As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'. 
+As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'.
 
 To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
 
-To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg',  'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
+To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg', 'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
 
-To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg'  'xl', and '2xl' breakpoints will have `noPadding`.
+To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg' 'xl', and '2xl' breakpoints will have `noPadding`.
 
 ```ts file="./PageMainSectionPadding.tsx"
+
 ```
 
 ### Group section
 
-To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`. 
+To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.
 
 The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
 
-To add additional components and information to a group, you may use the following properties: 
+To add additional components and information to a group, you may use the following properties:
 
-- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`. 
+- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
 - To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
-- To specify additional group content, use `additionalGroupedContent`. 
-
+- To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"
+
 ```
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property.  When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 
 ```ts file="./PageCenteredSection.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
index 13d81e026de..d5cd374a59a 100644
--- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageToggleButton,
   Toolbar,
@@ -18,10 +19,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -38,8 +39,8 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="centered-nav-toggle"
         >
           <BarsIcon />
@@ -54,7 +55,11 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="centered-section-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="centered-section-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 5e6a7ceed44..9256bbceea2 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageGroup,
   PageBreadcrumb,
@@ -25,10 +26,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -45,8 +46,8 @@ export const PageGroupSection: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="group-section-nav-toggle"
         >
           <BarsIcon />
@@ -61,7 +62,11 @@ export const PageGroupSection: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="group-section-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index 342d48586aa..72372668cf9 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -17,10 +18,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -37,8 +38,8 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="main-padding-nav-toggle"
         >
           <BarsIcon />
@@ -53,7 +54,11 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="main-padding-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index b3e589b34a2..fbd539b1685 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -41,7 +42,11 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar" />;
+  const sidebar = (
+    <PageSidebar id="uncontrolled-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page isManagedSidebar header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index 3b8b4d69a8d..fb699c4dd27 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -17,10 +18,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -37,8 +38,8 @@ export const PageVerticalNav: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="vertical-nav-toggle"
         >
           <BarsIcon />
@@ -53,7 +54,11 @@ export const PageVerticalNav: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index 1a0ccb8f338..f9efff9fe4b 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageToggleButton,
   Toolbar,
@@ -16,10 +17,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -36,8 +37,8 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="fill-nav-toggle"
         >
           <BarsIcon />
@@ -52,7 +53,11 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-core/src/components/Page/index.ts b/packages/react-core/src/components/Page/index.ts
index 18ab4962e4b..fd3bc29fe52 100644
--- a/packages/react-core/src/components/Page/index.ts
+++ b/packages/react-core/src/components/Page/index.ts
@@ -2,6 +2,7 @@ export * from './Page';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
 export * from './PageSidebar';
+export * from './PageSidebarBody';
 export * from './PageSection';
 export * from './PageNavigation';
 export * from './PageToggleButton';
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 25b86be379c..95105c3f7a4 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -2,16 +2,17 @@
 id: Navigation
 section: components
 ---
+
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle,
+PageHeader,
+PageHeaderTools,
+PageHeaderToolsGroup,
+PageHeaderToolsItem
 } from '@patternfly/react-core/deprecated';
 
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -41,6 +42,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -87,7 +89,11 @@ class PageLayoutDefaultNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -140,6 +146,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -199,7 +206,11 @@ class PageLayoutGroupsNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-group-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -249,6 +260,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -318,7 +330,11 @@ class PageLayoutExpandableNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-expandable-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -591,6 +607,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -644,7 +661,11 @@ class VerticalNavWithSubnav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -995,7 +1016,6 @@ import {
   Page,
   PageSection,
   PageSectionVariants,
-  PageSidebar,
   SkipToContent,
   TextContent,
   Text
@@ -1099,6 +1119,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -1144,7 +1165,11 @@ class PageLayoutLightNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} theme="light" />;
+    const Sidebar = (
+      <PageSidebar theme="light">
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-simple-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -1204,6 +1229,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -1389,7 +1415,11 @@ class PageLayoutManualNav extends React.Component {
         isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}
       />
     );
-    const Sidebar = <PageSidebar nav={PageNav} isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop} />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-manual-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -1439,6 +1469,7 @@ import {
   NavList,
   NavItem,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   Menu,
@@ -1446,10 +1477,7 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools,
-}from '@patternfly/react-core';
+import { PageHeader, PageHeaderTools } from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
 class VerticalPage extends React.Component {
@@ -1500,8 +1528,8 @@ class VerticalPage extends React.Component {
     const { activeItem } = this.state;
 
     const Sidebar = (
-      <PageSidebar style={{"overflow": "visible"}}
-        nav={
+      <PageSidebar style={{ overflow: 'visible' }}>
+        <PageSidebarBody>
           <Nav onSelect={this.onNavSelect}>
             <NavList>
               <NavItem preventDefault id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
@@ -1515,8 +1543,8 @@ class VerticalPage extends React.Component {
               </NavItem>
             </NavList>
           </Nav>
-        }
-      />
+        </PageSidebarBody>
+      </PageSidebar>
     );
 
     return (
diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 226f41334ba..86b8c441560 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -62,6 +62,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text,
@@ -334,7 +335,11 @@ class BasicNotificationDrawer extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -605,6 +610,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Title,
   TextContent,
@@ -930,7 +936,11 @@ class GroupedNotificationDrawer extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 9b29701b12c..e6c8de0f6bc 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -34,7 +34,7 @@ class BasicWizardDemo extends React.Component {
     this.state = {
       activeItem: 0
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -578,7 +578,7 @@ class FullPageWizard extends React.Component {
     this.state = {
       activeItem: 0
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -645,6 +645,7 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   Progress,
   SkipToContent,
   Text,
@@ -685,7 +686,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -728,7 +729,11 @@ class FullPageWizard extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
     const PageBreadcrumb = (
@@ -913,6 +918,7 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   Progress,
   SkipToContent,
   Text,
@@ -953,7 +959,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -996,7 +1002,11 @@ class FullPageWizard extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
     const PageBreadcrumb = (
diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js
index 1f963b46469..2d213d68821 100644
--- a/packages/react-core/src/demos/examples/DashboardWrapper.js
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -8,6 +8,7 @@ import {
   Page,
   PageSection,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent
@@ -41,7 +42,7 @@ export default class DashboardWrapper extends React.Component {
       activeItem: 1
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -92,7 +93,11 @@ export default class DashboardWrapper extends React.Component {
       </Nav>
     );
 
-    const _sidebar = <PageSidebar nav={PageNav} isNavOpen={sidebarNavOpen || false} />;
+    const _sidebar = (
+      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const PageSkipToContent = (
       <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
         Skip to content
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 696759e5a05..8276204c730 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -28,6 +28,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   Popper,
   SkipToContent,
@@ -149,7 +150,6 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     };
   }, [isOpen, menuRef]);
 
-
   const toggle = (
     <MenuToggle
       aria-label="Toggle"
@@ -396,7 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
     </DropdownGroupDeprecated>
   ];
-  
+
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -410,7 +410,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-            <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
+              <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
@@ -502,7 +502,11 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
index 3d465c4a423..3731e50129b 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Page,
   PageSidebar,
+  PageSidebarBody,
   Nav,
   MenuContent,
   MenuItem,
@@ -76,26 +77,26 @@ export const NavDrilldown: React.FunctionComponent = () => {
     toItemId: string,
     itemId: string
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
-    setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
+    setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]);
+    setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]);
     setActiveMenuId(toItemId);
   };
 
   const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
-    setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
-    setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
+    setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
+    setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
     setActiveMenuId(toItemId);
   };
 
   const onGetMenuHeight = (menuId: string, height: number) => {
     if (!menuHeights[menuId] && menuId !== 'rootMenu') {
-      setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height }));
+      setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));
     }
   };
 
   const sidebar = (
-    <PageSidebar
-      nav={
+    <PageSidebar>
+      <PageSidebarBody>
         <Nav>
           <Menu
             id="rootMenu"
@@ -122,8 +123,8 @@ export const NavDrilldown: React.FunctionComponent = () => {
             </MenuContent>
           </Menu>
         </Nav>
-      }
-    />
+      </PageSidebarBody>
+    </PageSidebar>
   );
 
   return (
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 99bc02b7706..fc14e2ba1d5 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -23,6 +23,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -30,7 +31,7 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem,
+  ToolbarItem
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -236,7 +237,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 5cbfc6b632e..3996442cf51 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -23,6 +23,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -236,7 +237,11 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 4010f60897a..0c80d133cae 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -25,6 +25,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -227,7 +228,11 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 
diff --git a/packages/react-core/src/deprecated/components/PageHeader/PageHeader.tsx b/packages/react-core/src/deprecated/components/PageHeader/PageHeader.tsx
index bb50482ff9f..f0123091a04 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/PageHeader.tsx
+++ b/packages/react-core/src/deprecated/components/PageHeader/PageHeader.tsx
@@ -59,9 +59,13 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   }
   return (
     <PageContextConsumer>
-      {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }: PageContextProps) => {
-        const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
-        const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+      {({
+        isManagedSidebar,
+        onSidebarToggle: managedOnSidebarToggle,
+        isSidebarOpen: managedIsSidebarOpen
+      }: PageContextProps) => {
+        const navToggle = isManagedSidebar ? managedOnSidebarToggle : onNavToggle;
+        const navOpen = isManagedSidebar ? managedIsSidebarOpen : isNavOpen;
 
         return (
           <header role={role} className={css(styles.pageHeader, className)} {...props}>
diff --git a/packages/react-core/src/deprecated/components/PageHeader/examples/PageHeader.md b/packages/react-core/src/deprecated/components/PageHeader/examples/PageHeader.md
index 80c75cf3de5..b08da0300a3 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/examples/PageHeader.md
+++ b/packages/react-core/src/deprecated/components/PageHeader/examples/PageHeader.md
@@ -2,9 +2,11 @@
 id: Page
 section: components
 cssPrefix: pf-c-page
-propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHeaderToolsItem']
+propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
 ---
 
+import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
+
 ## Page header examples
 
 ### Vertical navigation
@@ -12,4 +14,5 @@ propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHead
 This example shows the deprecated implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
 
 ```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+
 ```
diff --git a/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx b/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
index 09cf500cbeb..1f731ccba7f 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
+++ b/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-  Page,
-  PageSidebar,
-  PageSection,
-  PageSectionVariants
-} from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools
-} from '@patternfly/react-core/deprecated';
+import { Page, PageSidebar, PageSidebarBody, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
 
 export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
   const [isNavOpen, setIsNavOpen] = React.useState(true);
@@ -23,7 +15,7 @@ export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent =
   };
 
   const header = (
-    <PageHeader
+    <PageHeaderDeprecated
       logo="Logo"
       logoProps={logoProps}
       headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
@@ -34,7 +26,11 @@ export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent =
     />
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isNavOpen} id="vertical-pageheader-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>
diff --git a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
index 33f7550dcbc..e38cdf82687 100644
--- a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
+++ b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
@@ -5,19 +5,15 @@ describe('Page Managed Sidebar Closed Demo Test', () => {
 
   it('Test Page elements', () => {
     cy.get('#page-managed-sidebar-closed-demo').within(() => {
-      cy.get('#nav-toggle').then((hamburgerIcon: JQuery<HTMLDivElement>) => {
+      cy.get('#uncontrolled-nav-toggle').then((hamburgerIcon: JQuery<HTMLDivElement>) => {
         cy.get('.pf-c-page__sidebar.pf-m-collapsed').should('exist');
         cy.get('.pf-c-page__sidebar.pf-m-expanded').should('not.exist');
         cy.wrap(hamburgerIcon).click();
         cy.get('.pf-c-page__sidebar.pf-m-collapsed').should('not.exist');
         cy.get('.pf-c-page__sidebar.pf-m-expanded').should('exist');
       });
-      cy.get('div[class="pf-c-page__header-brand-link"]')
-        .invoke('text')
-        .should('eq', "Logo that's a <div>");
-      cy.get('.pf-c-page__header-tools')
-        .invoke('text')
-        .should('contain', 'PageHeaderTools | Avatar');
+      cy.get('div[class="pf-c-masthead__brand"]').invoke('text').should('eq', "Logo that's a div");
+      cy.get('.pf-c-masthead__content').invoke('text').should('contain', 'header-tools | Avatar');
       cy.get('.pf-c-page__main-section.pf-m-dark-100').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-dark-200').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index 9a4ca29a589..9da11d6eb3c 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -8,6 +8,7 @@ import {
   PageSection,
   SkipToContent,
   PageSidebar,
+  PageSidebarBody,
   Avatar,
   Brand,
   Radio
@@ -53,10 +54,10 @@ class App extends React.Component<{}, AppState> {
   };
 
   private getPages = () => {
-    const defaultDemo = Demos.find(demo => demo.isDefault);
+    const defaultDemo = Demos.find((demo) => demo.isDefault);
     return (
       <Switch>
-        {Demos.map(demo => (
+        {Demos.map((demo) => (
           <Route
             path={`/${demo.id}-nav-link`}
             render={() => (
@@ -98,7 +99,7 @@ class App extends React.Component<{}, AppState> {
               label={`Light theme`}
               name="light-theme"
               isChecked={!isDarkTheme}
-              onChange={checked => checked && this.onThemeSelect(false)}
+              onChange={(checked) => checked && this.onThemeSelect(false)}
             />
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
@@ -108,7 +109,7 @@ class App extends React.Component<{}, AppState> {
               aria-label="Dark theme"
               name="dark-theme"
               isChecked={isDarkTheme}
-              onChange={checked => checked && this.onThemeSelect(true)}
+              onChange={(checked) => checked && this.onThemeSelect(true)}
             />
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
@@ -140,7 +141,11 @@ class App extends React.Component<{}, AppState> {
       </Nav>
     );
 
-    const AppSidebar = <PageSidebar isNavOpen={isNavOpen} nav={nav} />;
+    const AppSidebar = (
+      <PageSidebar isSidebarOpen={isNavOpen}>
+        <PageSidebarBody>{nav}</PageSidebarBody>
+      </PageSidebar>
+    );
 
     return (
       <Router>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index e257cb82a3c..da220320948 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   Page,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   SkipToContent
@@ -171,7 +172,11 @@ export class PageDemo extends React.Component {
     );
     const pageId = 'page-demo-page-id';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
-    const Sidebar = <PageSidebar id="page-demo-sidebar" nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = (
+      <PageSidebar id="page-demo-sidebar" isSidebarOpen={isNavOpen}>
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    );
 
     return (
       <Page
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
index 359d6fb484c..742fc3bb257 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
@@ -1,52 +1,58 @@
 import React from 'react';
 import {
   Page,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
-  PageSectionVariants
+  PageSectionVariants,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
 } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
-import {
-  PageHeader,
-  PageHeaderTools,
-} from '@patternfly/react-core/deprecated';
+export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => {
+  const headerToolbar = (
+    <Toolbar id="uncontrolled-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools | Avatar</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const header = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand component="div">Logo that's a div</MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
 
-export class PageManagedSidebarClosedDemo extends React.Component {
-  static displayName = 'PageManagedSidebarClosedDemo';
-  componentDidMount() {
-    window.scrollTo(0, 0);
-  }
+  const sidebar = (
+    <PageSidebar id="uncontrolled-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
-  render() {
-    const logoProps = {
-      href: 'https://patternfly.org',
-      // eslint-disable-next-line no-console
-      onClick: () => console.log('clicked logo'),
-      target: '_blank'
-    };
-    const Header = (
-      <PageHeader
-        logo="Logo that's a <div>"
-        logoProps={logoProps}
-        headerTools={<PageHeaderTools>PageHeaderTools | Avatar</PageHeaderTools>}
-        showNavToggle
-        logoComponent={'div'}
-      />
-    );
-    const Sidebar = <PageSidebar nav="Navigation" />;
+  return (
+    <Page id="page-managed-sidebar-closed-demo" isManagedSidebar header={header} sidebar={sidebar}>
+      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
+      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
+      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+    </Page>
+  );
+};
 
-    return (
-      <Page
-        id="page-managed-sidebar-closed-demo"
-        header={Header}
-        sidebar={Sidebar}
-        isManagedSidebar
-        defaultManagedSidebarIsOpen={false}
-      >
-        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
-      </Page>
-    );
-  }
-}
+PageManagedSidebarClosedDemo.displayName = 'PageManagedSidebarClosedDemo';