diff --git a/package.json b/package.json
index 6066f2dfb0a..e19af5bd6f3 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.9.0",
     "@octokit/rest": "^16.43.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "14.4.3",
diff --git a/packages/react-core/src/next/components/Wizard/Wizard.tsx b/packages/react-core/src/next/components/Wizard/Wizard.tsx
index 040a8061335..ceae05460d3 100644
--- a/packages/react-core/src/next/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/next/components/Wizard/Wizard.tsx
@@ -6,16 +6,14 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import {
   DefaultWizardFooterProps,
   DefaultWizardNavProps,
-  isCustomWizardFooter,
   isWizardParentStep,
   WizardNavStepFunction,
   CustomWizardNavFunction
 } from './types';
 import { buildSteps, normalizeNavStep } from './utils';
-import { useWizardContext, WizardContextProvider } from './WizardContext';
+import { WizardContextProvider } from './WizardContext';
 import { WizardStepProps } from './WizardStep';
-import { WizardFooter } from './WizardFooter';
-import { WizardToggle } from './WizardToggle';
+import { WizardToggleInternal } from './WizardToggle';
 
 /**
  * Wrapper for all steps and hosts state, including navigation helpers, within context.
@@ -29,7 +27,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   header?: React.ReactNode;
   /** Wizard footer */
   footer?: DefaultWizardFooterProps | React.ReactElement;
-  /** Default wizard nav props or a custom WizardNav (with callback) */
+  /** Wizard nav */
   nav?: DefaultWizardNavProps | CustomWizardNavFunction;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
@@ -39,6 +37,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
+  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
+  unmountInactiveSteps?: boolean;
   /** Callback function when a step in the nav is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
@@ -51,8 +51,23 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   onClose?: () => void;
 }
 
-export const Wizard = (props: WizardProps) => {
-  const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
+export const Wizard = ({
+  startIndex = 1,
+  children,
+  footer,
+  height,
+  width,
+  className,
+  header,
+  nav,
+  unmountInactiveSteps,
+  onNavByIndex,
+  onNext,
+  onBack,
+  onSave,
+  onClose,
+  ...wrapperProps
+}: WizardProps) => {
   const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
   const steps = buildSteps(children);
 
@@ -130,7 +145,7 @@ export const Wizard = (props: WizardProps) => {
     <WizardContextProvider
       steps={steps}
       currentStepIndex={currentStepIndex}
-      footer={isCustomWizardFooter(footer) && footer}
+      footer={footer}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -138,47 +153,19 @@ export const Wizard = (props: WizardProps) => {
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
     >
-      <WizardInternal {...internalProps} footer={footer}>
-        {children}
-      </WizardInternal>
+      <div
+        className={css(styles.wizard, className)}
+        style={{
+          ...(height ? { height } : {}),
+          ...(width ? { width } : {})
+        }}
+        {...wrapperProps}
+      >
+        {header}
+        <WizardToggleInternal nav={nav} unmountInactiveSteps={unmountInactiveSteps} />
+      </div>
     </WizardContextProvider>
   );
 };
 
-// eslint-disable-next-line patternfly-react/no-anonymous-functions
-const WizardInternal = ({ height, width, className, header, footer, nav, ...divProps }: WizardProps) => {
-  const { activeStep, steps, footer: customFooter, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
-
-  const wizardFooter = customFooter || (
-    <WizardFooter
-      activeStep={activeStep}
-      onNext={onNext}
-      onBack={onBack}
-      onClose={onClose}
-      disableBackButton={activeStep?.id === steps[0]?.id}
-      {...footer}
-    />
-  );
-
-  return (
-    <div
-      className={css(styles.wizard, className)}
-      style={{
-        ...(height ? { height } : {}),
-        ...(width ? { width } : {})
-      }}
-      {...divProps}
-    >
-      {header}
-      <WizardToggle
-        steps={steps}
-        activeStep={activeStep}
-        footer={wizardFooter}
-        nav={nav}
-        goToStepByIndex={goToStepByIndex}
-      />
-    </div>
-  );
-};
-
 Wizard.displayName = 'Wizard';
diff --git a/packages/react-core/src/next/components/Wizard/WizardBody.tsx b/packages/react-core/src/next/components/Wizard/WizardBody.tsx
index 51cd195facc..c9d4e3c40bb 100644
--- a/packages/react-core/src/next/components/Wizard/WizardBody.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardBody.tsx
@@ -8,7 +8,7 @@ import { css } from '@patternfly/react-styles';
  */
 
 export interface WizardBodyProps {
-  children?: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
   hasNoBodyPadding?: boolean;
   /** An aria-label to use for the wrapper element */
diff --git a/packages/react-core/src/next/components/Wizard/WizardContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
index 8859d1b5879..d9a934203de 100644
--- a/packages/react-core/src/next/components/Wizard/WizardContext.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import { WizardControlStep } from './types';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import { DefaultWizardFooterProps, isCustomWizardFooter, WizardControlStep } from './types';
 import { getActiveStep } from './utils';
+import { WizardFooter } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
@@ -22,7 +27,7 @@ export interface WizardContextProps {
   /** Navigate to step by index */
   goToStepByIndex: (index: number) => void;
   /** Update the footer with any react element */
-  setFooter: (footer: React.ReactElement) => void;
+  setFooter: (footer: DefaultWizardFooterProps | React.ReactElement) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -39,7 +44,7 @@ interface WizardContextRenderProps {
 export interface WizardContextProviderProps {
   steps: WizardControlStep[];
   currentStepIndex: number;
-  footer: React.ReactElement;
+  footer: DefaultWizardFooterProps | React.ReactElement;
   children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
   onNext(): void;
   onBack(): void;
@@ -66,6 +71,23 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [footer, setFooter] = React.useState(initialFooter);
   const activeStep = getActiveStep(steps, currentStepIndex);
 
+  const wizardFooter = React.useMemo(
+    () =>
+      isCustomWizardFooter(footer) ? (
+        <div className={css(styles.wizardFooter)}>{footer}</div>
+      ) : (
+        <WizardFooter
+          activeStep={activeStep}
+          onNext={onNext}
+          onBack={onBack}
+          onClose={onClose}
+          disableBackButton={activeStep?.id === steps[0]?.id}
+          {...footer}
+        />
+      ),
+    [activeStep, footer, onBack, onClose, onNext, steps]
+  );
+
   // When the active step changes and the newly active step isn't visited, set the visited flag to true.
   React.useEffect(() => {
     if (activeStep && !activeStep?.visited) {
@@ -86,7 +108,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
       value={{
         steps,
         activeStep,
-        footer,
+        footer: wizardFooter,
         onNext,
         onBack,
         onClose,
@@ -96,7 +118,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         setFooter
       }}
     >
-      {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
+      {typeof children === 'function'
+        ? children({ activeStep, steps, footer: wizardFooter, onNext, onBack, onClose })
+        : children}
     </WizardContext.Provider>
   );
 };
diff --git a/packages/react-core/src/next/components/Wizard/WizardNav.tsx b/packages/react-core/src/next/components/Wizard/WizardNav.tsx
index 9cdfcb86ab2..76e8f6cd58b 100644
--- a/packages/react-core/src/next/components/Wizard/WizardNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardNav.tsx
@@ -10,7 +10,7 @@ export interface WizardNavProps {
   /** Sets the aria-labelledby attribute on the nav element */
   'aria-labelledby'?: string;
   /** Whether the nav is expanded */
-  isOpen?: boolean;
+  isExpanded?: boolean;
   /** True to return the inner list without the wrapping nav element */
   returnList?: boolean;
 }
@@ -19,7 +19,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   children,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  isOpen = false,
+  isExpanded = false,
   returnList = false
 }: WizardNavProps) => {
   const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
@@ -30,7 +30,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
     >
diff --git a/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx
index 311f4a545bf..5d6648bced6 100644
--- a/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx
@@ -73,7 +73,10 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         {...rest}
         {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
         {...(id && { id: id.toString() })}
-        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        onClick={e => {
+          e.preventDefault();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step);
+        }}
         className={css(
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,
diff --git a/packages/react-core/src/next/components/Wizard/WizardStep.tsx b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
index 4a0f7a65564..64b32cde34f 100644
--- a/packages/react-core/src/next/components/Wizard/WizardStep.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardControlStep } from './types';
+import { WizardBasicStep } from './types';
 import { WizardBody, WizardBodyProps } from './WizardBody';
 
 /**
@@ -8,16 +8,16 @@ import { WizardBody, WizardBodyProps } from './WizardBody';
  * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
  */
 
-export interface WizardStepProps extends Omit<WizardControlStep, 'parentId' | 'subStepIds' | 'visited'> {
+export interface WizardStepProps extends Omit<WizardBasicStep, 'visited'> {
   /** Optional for when the step is used as a parent to sub-steps */
   children?: React.ReactNode;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
-  body?: WizardBodyProps | null;
+  body?: Omit<WizardBodyProps, 'children'> | null;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
 }
 
 export const WizardStep = ({ body, children }: WizardStepProps) =>
-  body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+  body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
 
 WizardStep.displayName = 'WizardStep';
diff --git a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
index 7e67983a840..69503a48333 100644
--- a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
@@ -6,16 +6,17 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNav, WizardNavItem } from '../Wizard';
+import { WizardNav, WizardNavItem, WizardNavProps } from '../Wizard';
 import {
   WizardControlStep,
-  CustomWizardNavFunction,
-  DefaultWizardNavProps,
   isWizardBasicStep,
   isWizardParentStep,
   isWizardSubStep,
-  isCustomWizardNav
+  isCustomWizardNav,
+  DefaultWizardNavProps,
+  CustomWizardNavFunction
 } from './types';
+import { useWizardContext } from './WizardContext';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
@@ -26,16 +27,18 @@ export interface WizardToggleProps {
   steps: WizardControlStep[];
   /** The currently active WizardStep */
   activeStep: WizardControlStep;
-  /** The WizardFooter */
+  /** Wizard footer */
   footer: React.ReactElement;
-  /** Custom WizardNav or callback used to create a default WizardNav */
-  nav: DefaultWizardNavProps | CustomWizardNavFunction;
-  /** Navigate using the step index */
-  goToStepByIndex: (index: number) => void;
-  /** The button's aria-label */
+  /** Wizard nav */
+  nav: React.ReactElement<WizardNavProps>;
+  /** The expandable dropdown button's aria-label */
   'aria-label'?: string;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
   unmountInactiveSteps?: boolean;
+  /** Flag to determine whether the dropdown nav is expanded */
+  isNavExpanded?: boolean;
+  /** Callback to expand or collapse the dropdown nav */
+  toggleNavExpanded?: () => void;
 }
 
 export const WizardToggle = ({
@@ -43,20 +46,20 @@ export const WizardToggle = ({
   activeStep,
   footer,
   nav,
-  goToStepByIndex,
+  isNavExpanded,
+  toggleNavExpanded,
   unmountInactiveSteps = true,
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
-  const [isNavOpen, setIsNavOpen] = React.useState(false);
   const isActiveSubStep = isWizardSubStep(activeStep);
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
-      if (isNavOpen && event.key === KeyTypes.Escape) {
-        setIsNavOpen(!isNavOpen);
+      if (isNavExpanded && event.key === KeyTypes.Escape) {
+        toggleNavExpanded();
       }
     },
-    [isNavOpen]
+    [isNavExpanded, toggleNavExpanded]
   );
 
   // Open/close collapsable nav on keydown event
@@ -84,19 +87,60 @@ export const WizardToggle = ({
         );
       });
 
+  return (
+    <>
+      <button
+        onClick={toggleNavExpanded}
+        className={css(styles.wizardToggle, isNavExpanded && 'pf-m-expanded')}
+        aria-label={ariaLabel}
+        aria-expanded={isNavExpanded}
+      >
+        <span className={css(styles.wizardToggleList)}>
+          <span className={css(styles.wizardToggleListItem)}>
+            {activeStep?.name}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+          </span>
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
+        </span>
+
+        <span className={css(styles.wizardToggleIcon)}>
+          <CaretDownIcon aria-hidden="true" />
+        </span>
+      </button>
+      <div className={css(styles.wizardOuterWrap)}>
+        <div className={css(styles.wizardInnerWrap)}>
+          {nav}
+          {bodyContent}
+        </div>
+
+        {footer}
+      </div>
+    </>
+  );
+};
+
+interface WizardToggleInternalProps extends Pick<WizardToggleProps, 'unmountInactiveSteps'> {
+  /** Custom WizardNav or callback used to create a default WizardNav */
+  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+}
+
+export const WizardToggleInternal = ({ nav, unmountInactiveSteps }: WizardToggleInternalProps) => {
+  const [isNavExpanded, setIsNavExpanded] = React.useState(false);
+  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
+
   const wizardNav = React.useMemo(() => {
     if (isCustomWizardNav(nav)) {
-      return nav(isNavOpen, steps, activeStep, goToStepByIndex);
+      return nav(isNavExpanded, steps, activeStep, goToStepByIndex);
     }
 
-    const props = {
-      isOpen: isNavOpen,
+    const navProps = {
+      isExpanded: isNavExpanded,
       'aria-label': nav?.ariaLabel || 'Wizard nav',
       ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
     };
 
     return (
-      <WizardNav {...props}>
+      <WizardNav {...navProps}>
         {steps.map((step, index) => {
           const stepIndex = index + 1;
           const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
@@ -148,7 +192,7 @@ export const WizardToggle = ({
                   step={firstSubStepIndex}
                   onNavItemClick={goToStepByIndex}
                 >
-                  <WizardNav {...props} returnList>
+                  <WizardNav {...navProps} returnList>
                     {subNavItems}
                   </WizardNav>
                 </WizardNavItem>
@@ -174,37 +218,18 @@ export const WizardToggle = ({
         })}
       </WizardNav>
     );
-  }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
+  }, [activeStep, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
-    <>
-      <button
-        onClick={() => setIsNavOpen(prevIsOpen => !prevIsOpen)}
-        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
-        aria-label={ariaLabel}
-        aria-expanded={isNavOpen}
-      >
-        <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem)}>
-            {activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
-          </span>
-          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
-        </span>
-
-        <span className={css(styles.wizardToggleIcon)}>
-          <CaretDownIcon aria-hidden="true" />
-        </span>
-      </button>
-      <div className={css(styles.wizardOuterWrap)}>
-        <div className={css(styles.wizardInnerWrap)}>
-          {wizardNav}
-          {bodyContent}
-        </div>
-
-        {footer}
-      </div>
-    </>
+    <WizardToggle
+      nav={wizardNav}
+      footer={footer}
+      steps={steps}
+      activeStep={activeStep}
+      isNavExpanded={isNavExpanded}
+      toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
+      unmountInactiveSteps={unmountInactiveSteps}
+    />
   );
 };
 
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
index e0c36ef688b..1f23e98213e 100644
--- a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
@@ -3,302 +3,320 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DefaultWizardNavProps, WizardControlStep, DefaultWizardFooterProps } from '../types';
-import { WizardNav, WizardNavItem, Wizard, WizardStep } from '../';
-
-describe('Wizard', () => {
-  it('renders step when child is of type WizardStep', () => {
-    render(
-      <Wizard>
-        <WizardStep id="test-step" name="Test step">
-          Step content
-        </WizardStep>
-      </Wizard>
-    );
-
-    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
-    expect(screen.getByText('Step content')).toBeVisible();
-  });
-
-  it('renders step when child has required props; name, id, children', () => {
-    const CustomStep = props => <div {...props} />;
-
-    render(
-      <Wizard>
-        <CustomStep id="test-step" name="Test step">
-          Custom step content
-        </CustomStep>
-      </Wizard>
-    );
-
-    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
-    expect(screen.getByText('Custom step content')).toBeVisible();
-  });
-
-  it('renders a header when specified', () => {
-    render(
-      <Wizard header="Some header">
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByText('Some header')).toBeVisible();
-  });
-
-  it('renders default footer without specifying the footer prop', () => {
-    render(
-      <Wizard>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
-  });
-
-  it('renders default footer with custom props', () => {
-    const footer: DefaultWizardFooterProps = {
-      nextButtonText: <>Proceed with caution</>,
-      backButtonText: 'Turn back!',
-      cancelButtonText: 'Leave now!'
-    };
-
-    render(
-      <Wizard footer={footer}>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByRole('button', { name: 'Proceed with caution' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Turn back!' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
-  });
-
-  it('renders custom footer', () => {
-    render(
-      <Wizard footer={<>Some footer</>}>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByText('Some footer')).toBeVisible();
-  });
-
-  it('renders default nav without specifying the nav prop', () => {
-    render(
-      <Wizard>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByRole('navigation')).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
-  });
-
-  it('renders default nav with custom props', () => {
-    const nav: DefaultWizardNavProps = {
-      isExpandable: true,
-      ariaLabel: 'Some nav label',
-      ariaLabelledBy: 'wizard-id',
-      forceStepVisit: true
-    };
-
-    render(
-      <Wizard id="wizard-id" nav={nav}>
-        <WizardStep id="step-1" name="Test step 1" steps={[<WizardStep id="nested-step" name="Nested step" />]} />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    const navElement = screen.getByLabelText('Some nav label');
-
-    expect(navElement).toBeVisible();
-    expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
-    expect(screen.getByRole('button', { name: 'Test step 1' }).parentElement).toHaveClass('pf-m-expandable');
-    expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
-  });
-
-  it('renders custom nav', () => {
-    const nav = (
-      isOpen: boolean,
-      steps: WizardControlStep[],
-      activeStep: WizardControlStep,
-      goToStepByIndex: (index: number) => void
-    ) => (
-      <WizardNav isOpen={isOpen}>
-        {steps.map((step, index) => (
-          <WizardNavItem
-            key={step.id}
-            id={step.id}
-            content={step.name}
-            isCurrent={activeStep.id === step.id}
-            isDisabled={step.isDisabled}
-            step={index + 1}
-            onNavItemClick={goToStepByIndex}
-          />
-        ))}
-      </WizardNav>
-    );
-
-    render(
-      <Wizard nav={nav}>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByRole('navigation')).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
-  });
-
-  it('starts at the first step as the active one by default', () => {
-    render(
-      <Wizard>
-        <WizardStep id="step-1" name="Test step 1">
-          Step 1 content
-        </WizardStep>
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    expect(screen.getByText('Step 1 content')).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Test step 1' })).toHaveClass('pf-m-current');
-  });
-
-  it(`can start at a step that isn't the first by specifying 'startIndex'`, () => {
-    render(
-      <Wizard startIndex={2}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2">
-          Step 2 content
-        </WizardStep>
-      </Wizard>
-    );
-
-    expect(screen.getByText('Step 2 content')).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveClass('pf-m-current');
-  });
-
-  it(`can use custom classNames and spread other props into the wizard's div`, () => {
-    render(
-      <Wizard className="some-class" data-testid="wizard-id">
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    expect(screen.getByTestId('wizard-id')).toHaveClass('some-class');
-  });
-
-  it(`can customize the wizard's height and width`, () => {
-    render(
-      <Wizard height={500} width={500} data-testid="wizard-id">
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    const wizard = screen.getByTestId('wizard-id');
-
-    expect(wizard).toHaveStyle('height: 500px');
-    expect(wizard).toHaveStyle('width: 500px');
-  });
-
-  it('calls onNavByIndex on nav item click', async () => {
-    const user = userEvent.setup();
-    const onNavByIndex = jest.fn();
-
-    render(
-      <Wizard onNavByIndex={onNavByIndex}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-    expect(onNavByIndex).toHaveBeenCalled();
-  });
-
-  it('calls onNext and not onSave on next button click when not on the last step', async () => {
-    const user = userEvent.setup();
-    const onNext = jest.fn();
-    const onSave = jest.fn();
-
-    render(
-      <Wizard onNext={onNext} onSave={onSave}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Next' }));
-
-    expect(onNext).toHaveBeenCalled();
-    expect(onSave).not.toHaveBeenCalled();
-  });
-
-  it('calls onBack on back button click', async () => {
-    const user = userEvent.setup();
-    const onBack = jest.fn();
-
-    render(
-      <Wizard onBack={onBack}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-    await user.click(screen.getByRole('button', { name: 'Back' }));
-
-    expect(onBack).toHaveBeenCalled();
-  });
-
-  it('calls onSave and not onClose on next button click when on the last step', async () => {
-    const user = userEvent.setup();
-    const onSave = jest.fn();
-    const onClose = jest.fn();
-
-    render(
-      <Wizard onSave={onSave} onClose={onClose}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-    await user.click(screen.getByRole('button', { name: 'Next' }));
-
-    expect(onSave).toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('calls onClose when onSave is not specified on next button click when on the last step', async () => {
-    const user = userEvent.setup();
-    const onClose = jest.fn();
-
-    render(
-      <Wizard onClose={onClose}>
-        <WizardStep id="step-1" name="Test step 1" />
-        <WizardStep id="step-2" name="Test step 2" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-    await user.click(screen.getByRole('button', { name: 'Next' }));
-
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('calls onClose on cancel link click', async () => {
-    const user = userEvent.setup();
-    const onClose = jest.fn();
-
-    render(
-      <Wizard onClose={onClose}>
-        <WizardStep id="test-step" name="Test step" />
-      </Wizard>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(onClose).toHaveBeenCalled();
-  });
+import { DefaultWizardNavProps, DefaultWizardFooterProps } from '../types';
+import { Wizard, WizardStep } from '../';
+
+test('renders step when child is of type WizardStep', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step">
+        Step content
+      </WizardStep>
+    </Wizard>
+  );
+
+  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+  expect(screen.getByText('Step content')).toBeVisible();
+});
+
+test('renders step when child has required props; name, id, children', () => {
+  const CustomStep = props => <div {...props} />;
+
+  render(
+    <Wizard>
+      <CustomStep id="test-step" name="Test step">
+        Custom step content
+      </CustomStep>
+    </Wizard>
+  );
+
+  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+  expect(screen.getByText('Custom step content')).toBeVisible();
+});
+
+test('renders a header when specified', () => {
+  render(
+    <Wizard header="Some header">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByText('Some header')).toBeVisible();
+});
+
+test('renders default footer without specifying the footer prop', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+});
+
+test('renders default footer with custom props', () => {
+  const footer: DefaultWizardFooterProps = {
+    nextButtonText: <>Proceed with caution</>,
+    backButtonText: 'Turn back!',
+    cancelButtonText: 'Leave now!'
+  };
+
+  render(
+    <Wizard footer={footer}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByRole('button', { name: 'Proceed with caution' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Turn back!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
+});
+
+test('renders custom footer', () => {
+  render(
+    <Wizard footer={<>Some footer</>}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByText('Some footer')).toBeVisible();
+});
+
+test('renders default nav without specifying the nav prop', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByRole('navigation')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+});
+
+test('renders default nav with custom props', () => {
+  const nav: DefaultWizardNavProps = {
+    isExpandable: true,
+    ariaLabel: 'Some nav label',
+    ariaLabelledBy: 'wizard-id',
+    forceStepVisit: true
+  };
+
+  render(
+    <Wizard id="wizard-id" nav={nav}>
+      <WizardStep id="step-1" name="Test step 1" steps={[<WizardStep id="nested-step" name="Nested step" />]} />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  const navElement = screen.getByLabelText('Some nav label');
+
+  expect(navElement).toBeVisible();
+  expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
+  expect(screen.getByRole('button', { name: 'Test step 1' }).parentElement).toHaveClass('pf-m-expandable');
+  expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
+});
+
+test('renders custom nav', () => {
+  const customNav = <nav>Some custom nav</nav>;
+
+  render(
+    <Wizard nav={customNav}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByRole('navigation')).toBeVisible();
+});
+
+test('starts at the first step as the active one by default', () => {
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  expect(screen.getByText('Step 1 content')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step 1' })).toHaveClass('pf-m-current');
+});
+
+test(`can start at a step that isn't the first by specifying 'startIndex'`, () => {
+  render(
+    <Wizard startIndex={2}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  expect(screen.getByText('Step 2 content')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveClass('pf-m-current');
+});
+
+test(`can use custom classNames and spread other props into the wizard's div`, () => {
+  render(
+    <Wizard className="some-class" data-testid="wizard-id">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByTestId('wizard-id')).toHaveClass('some-class');
+});
+
+test(`can customize the wizard's height and width`, () => {
+  render(
+    <Wizard height={500} width={500} data-testid="wizard-id">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  const wizard = screen.getByTestId('wizard-id');
+
+  expect(wizard).toHaveStyle('height: 500px');
+  expect(wizard).toHaveStyle('width: 500px');
+});
+
+test('calls onNavByIndex on nav item click', async () => {
+  const user = userEvent.setup();
+  const onNavByIndex = jest.fn();
+
+  render(
+    <Wizard onNavByIndex={onNavByIndex}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onNavByIndex).toHaveBeenCalled();
+});
+
+test('calls onNext and not onSave on next button click when not on the last step', async () => {
+  const user = userEvent.setup();
+  const onNext = jest.fn();
+  const onSave = jest.fn();
+
+  render(
+    <Wizard onNext={onNext} onSave={onSave}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(onNext).toHaveBeenCalled();
+  expect(onSave).not.toHaveBeenCalled();
+});
+
+test('calls onBack on back button click', async () => {
+  const user = userEvent.setup();
+  const onBack = jest.fn();
+
+  render(
+    <Wizard onBack={onBack}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+
+  expect(onBack).toHaveBeenCalled();
+});
+
+test('calls onSave and not onClose on next button click when on the last step', async () => {
+  const user = userEvent.setup();
+  const onSave = jest.fn();
+  const onClose = jest.fn();
+
+  render(
+    <Wizard onSave={onSave} onClose={onClose}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(onSave).toHaveBeenCalled();
+  expect(onClose).not.toHaveBeenCalled();
+});
+
+test('calls onClose when onSave is not specified on next button click when on the last step', async () => {
+  const user = userEvent.setup();
+  const onClose = jest.fn();
+
+  render(
+    <Wizard onClose={onClose}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(onClose).toHaveBeenCalled();
+});
+
+test('calls onClose on cancel link click', async () => {
+  const user = userEvent.setup();
+  const onClose = jest.fn();
+
+  render(
+    <Wizard onClose={onClose}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(onClose).toHaveBeenCalled();
+});
+
+test('unmounts inactive steps by default', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+
+  expect(screen.queryByText('Step 1 content')).toBeNull();
+  expect(screen.getByText('Step 2 content')).toBeVisible();
+});
+
+test('keeps inactive steps mounted when unmountInactiveSteps is enabled', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard unmountInactiveSteps={false}>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+
+  expect(screen.getByText('Step 1 content')).toBeInTheDocument();
+  expect(screen.getByText('Step 2 content')).toBeVisible();
 });
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/WizardBody.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/WizardBody.test.tsx
new file mode 100644
index 00000000000..bbb7329a951
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/WizardBody.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WizardBody } from '../WizardBody';
+
+test('renders children without additional props', () => {
+  const { container } = render(<WizardBody>content</WizardBody>);
+
+  expect(container).toHaveTextContent('content');
+  expect(container).not.toHaveAttribute('aria-label');
+  expect(container).not.toHaveAttribute('aria-labelledby');
+});
+
+test('has no padding className when hasNoBodyPadding is not specified', () => {
+  render(<WizardBody>content</WizardBody>);
+  expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
+});
+
+test('has padding className when hasNoBodyPadding is specified', () => {
+  render(<WizardBody hasNoBodyPadding>content</WizardBody>);
+  expect(screen.getByText('content')).toHaveClass('pf-m-no-padding');
+});
+
+test('has aria-label when one is specified', () => {
+  render(<WizardBody aria-label="Body label">content</WizardBody>);
+  expect(screen.getByLabelText('Body label')).toBeVisible();
+});
+
+test('has aria-labelledby when one is specified', () => {
+  const { container } = render(<WizardBody aria-labelledby="some-id">content</WizardBody>);
+  expect(container.firstElementChild).toHaveAttribute('aria-labelledby', 'some-id');
+});
+
+test('wrapper element is of type div when wrapperElement is not specified', () => {
+  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
+  expect(container.firstElementChild?.tagName).toEqual('DIV');
+});
+
+test('renders with custom wrapperElement', () => {
+  const { container } = render(<WizardBody wrapperElement="main">content</WizardBody>);
+  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+});
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/WizardFooter.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/WizardFooter.test.tsx
new file mode 100644
index 00000000000..988e91498bc
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/WizardFooter.test.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { WizardFooter } from '../WizardFooter';
+
+const defaultProps = {
+  activeStep: { name: 'Step name', id: 'some-id' },
+  onNext: jest.fn(),
+  onBack: jest.fn(),
+  onClose: jest.fn()
+};
+
+test('has button names of "Next", "Back", and "Cancel" by default', () => {
+  render(<WizardFooter {...defaultProps} />);
+
+  expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+});
+
+test('calls onNext when the next button is clicked', async () => {
+  const onNext = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onNext={onNext} />);
+
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(onNext).toHaveBeenCalled();
+});
+
+test('calls onBack when the back button is clicked', async () => {
+  const onBack = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onBack={onBack} />);
+
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+  expect(onBack).toHaveBeenCalled();
+});
+
+test('calls onClose when the close button is clicked', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onClose={onClose} />);
+
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(onClose).toHaveBeenCalled();
+});
+
+test('can have custom button names', () => {
+  render(
+    <WizardFooter
+      {...defaultProps}
+      nextButtonText={<>Go!</>}
+      backButtonText="Turn around!"
+      cancelButtonText={<span>Get out!</span>}
+    />
+  );
+
+  expect(screen.getByRole('button', { name: 'Go!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Turn around!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Get out!' })).toBeVisible();
+});
+
+test('has disabled back button when disableBackButton is enabled', () => {
+  render(<WizardFooter {...defaultProps} disableBackButton />);
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveAttribute('disabled');
+});
+
+test('has no back button when activeStep has hideBackButton enabled', () => {
+  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideBackButton: true }} />);
+  expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
+});
+
+test('has no cancel button when activeStep has hideCancelButton enabled', () => {
+  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideCancelButton: true }} />);
+  expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+});
+
+test(`uses activeStep's nextButtonText when specified instead of nextButtonText of WizardFooter`, () => {
+  render(
+    <WizardFooter
+      {...defaultProps}
+      nextButtonText="Footer next"
+      activeStep={{ ...defaultProps.activeStep, nextButtonText: 'Active step next' }}
+    />
+  );
+  expect(screen.queryByRole('button', { name: 'Footer next' })).toBeNull();
+  expect(screen.getByRole('button', { name: 'Active step next' })).toBeVisible();
+});
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/WizardStep.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/WizardStep.test.tsx
new file mode 100644
index 00000000000..b71bdeaab9d
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/WizardStep.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WizardStep } from '../WizardStep';
+
+test('renders without children', () => {
+  const { container } = render(<WizardStep id="test-step" name="Test step" />);
+  expect(container).toBeVisible();
+});
+
+test('renders with children', () => {
+  render(
+    <WizardStep id="test-step" name="Test step">
+      content
+    </WizardStep>
+  );
+
+  expect(screen.getByText('content')).toBeVisible();
+});
+
+test('excludes WizardBody when body is set to null', () => {
+  render(<WizardStep id="test-step" name="Test step" body={null} />);
+  expect(screen.queryByRole('main')).toBeNull();
+});
+
+test('uses body props for WizardBody when passed', () => {
+  render(
+    <WizardStep id="test-step" name="Test step" body={{ 'aria-label': 'Some label' }}>
+      content
+    </WizardStep>
+  );
+
+  expect(screen.getByLabelText('Some label')).toBeVisible();
+});
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/WizardToggle.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/WizardToggle.test.tsx
new file mode 100644
index 00000000000..ff1fd72d221
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/WizardToggle.test.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { KeyTypes } from '../../../../helpers';
+import { WizardToggle, WizardToggleProps } from '../WizardToggle';
+
+const steps = [
+  { id: 'id-1', name: 'First step', component: <>First step content</> },
+  { id: 'id-2', name: 'Second step', component: <>Second step content</> }
+];
+
+const defaultProps: WizardToggleProps = {
+  steps,
+  activeStep: steps[0],
+  footer: <div>Some footer</div>,
+  nav: <div>Some nav</div>,
+  'aria-label': 'Some label'
+};
+
+test('renders provided footer, nav, and active step content', () => {
+  render(<WizardToggle {...defaultProps} />);
+
+  expect(screen.getByText('Some footer')).toBeVisible();
+  expect(screen.getByText('Some nav')).toBeVisible();
+  expect(screen.getByText('First step content')).toBeVisible();
+});
+
+test('applies aria-label to the expandable toggle button when specified', () => {
+  render(<WizardToggle {...defaultProps} aria-label="Some label" />);
+  expect(screen.getByRole('button', { name: 'Some label' })).toBeVisible();
+});
+
+test('has expanded properties when isNavExpanded is true', async () => {
+  render(<WizardToggle {...defaultProps} aria-label="Some label" isNavExpanded />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+});
+
+test('calls toggleNavExpanded on toggle button click', async () => {
+  const toggleNavExpanded = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardToggle {...defaultProps} aria-label="Some label" toggleNavExpanded={toggleNavExpanded} />);
+
+  await user.click(screen.getByRole('button', { name: 'Some label' }));
+  expect(toggleNavExpanded).toHaveBeenCalled();
+});
+
+test('renders only the active step content by default', async () => {
+  render(<WizardToggle {...defaultProps} />);
+
+  expect(screen.getByText('First step content')).toBeInTheDocument();
+  expect(screen.queryByText('Second step content')).toBeNull;
+});
+
+test('renders all step content when unmountInactiveSteps is false', async () => {
+  render(<WizardToggle {...defaultProps} unmountInactiveSteps={false} />);
+
+  expect(screen.getByText('First step content')).toBeInTheDocument();
+  expect(screen.getByText('Second step content')).toBeInTheDocument();
+});
+
+test('has expanded properties when the toggle dropdown button is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(<WizardToggleExpand aria-label="Some label" />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+  expect(toggleButton).not.toHaveClass('pf-m-expanded');
+
+  await user.click(toggleButton);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+});
+
+test('unsets expanded properties when using the Escape key', async () => {
+  const user = userEvent.setup();
+
+  render(<WizardToggleExpand aria-label="Some label" />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  await user.click(toggleButton);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+
+  await user.type(toggleButton, `{${KeyTypes.Escape}}`);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+  expect(toggleButton).not.toHaveClass('pf-m-expanded');
+});
+
+const WizardToggleExpand = props => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <WizardToggle
+      {...defaultProps}
+      isNavExpanded={isExpanded}
+      toggleNavExpanded={() => setIsExpanded(!isExpanded)}
+      {...props}
+    />
+  );
+};
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/utils.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/utils.test.tsx
new file mode 100644
index 00000000000..97b14ccf893
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/utils.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { WizardParentStep, WizardSubStep } from '../types';
+import { buildSteps } from '../utils';
+import { WizardStep } from '../WizardStep';
+
+describe('buildSteps', () => {
+  test('throws error if child does not have required props or type of WizardStep', () => {
+    try {
+      buildSteps(<div />);
+    } catch (error) {
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+    }
+  });
+
+  test('throws error if no children are valid react elements', () => {
+    try {
+      buildSteps('test' as any);
+    } catch (error) {
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+    }
+  });
+
+  test('returns array of steps if children are of type WizardStep', () => {
+    const component = <WizardStep name="Step 1" id="step-1" />;
+    const [step] = buildSteps(component);
+
+    expect(step.id).toEqual('step-1');
+    expect(step.name).toEqual('Step 1');
+    expect(step.component?.props).toEqual(component.props);
+  });
+
+  test('returns array of steps if children have required props', () => {
+    const CustomStep = props => <div {...props} />;
+    const component = (
+      <CustomStep name="Step 1" id="step-1">
+        Content
+      </CustomStep>
+    );
+    const [step] = buildSteps(component);
+
+    expect(step.id).toEqual('step-1');
+    expect(step.name).toEqual('Step 1');
+    expect(step.component?.props).toEqual(component.props);
+  });
+
+  test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
+    const CustomSubStep = props => <div {...props} />;
+
+    const component = (
+      <WizardStep
+        name="Step 1"
+        id="step-1"
+        steps={[
+          <WizardStep name="SubStep" id="sub-step" />,
+          <CustomSubStep name="Custom SubStep" id="custom-sub-step" />
+        ]}
+      />
+    );
+    const [subStep, customSubStep, parentStep] = buildSteps(component);
+
+    expect((subStep as WizardSubStep).parentId).toEqual('step-1');
+    expect((customSubStep as WizardSubStep).parentId).toEqual('step-1');
+    expect((parentStep as WizardParentStep).subStepIds).toEqual(['sub-step', 'custom-sub-step']);
+  });
+});
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 26af49822a8..71de9f50f01 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -47,8 +47,6 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core/next';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
 
@@ -63,10 +61,10 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 
 The `Wizard`'s `nav` property can be used to build your own navigation.
 
-```
+```noLive
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
-  isOpen: boolean,
+  isExpanded: boolean,
   steps: WizardControlStep[],
   activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
@@ -85,7 +83,7 @@ Includes a header, custom footer, sub-steps, step content with a drawer, custom
 
 Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack` or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
 
-```
+```noLive
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
 type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
 
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
index 29941787d3d..2d09c545b88 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
@@ -10,12 +10,12 @@ import {
 
 export const WizardCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (
-    isOpen: boolean,
+    isExpanded: boolean,
     steps: WizardControlStep[],
     activeStep: WizardControlStep,
     goToStepByIndex: (index: number) => void
   ) => (
-    <WizardNav isOpen={isOpen}>
+    <WizardNav isExpanded={isExpanded}>
       {steps.map((step, index) => (
         <WizardNavItem
           key={step.id}
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
index cd78b3434b5..a54781be81f 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -27,8 +27,6 @@ import {
   WizardNavItem,
   WizardHeader
 } from '@patternfly/react-core/next';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const CustomWizardFooter = () => {
   const { activeStep, onNext, onBack, onClose } = useWizardContext();
@@ -100,14 +98,8 @@ const StepWithCustomFooter = () => {
 
   const footer = React.useMemo(
     () => (
-      <div className={css(styles.wizardFooter)}>
-        <Button
-          variant="primary"
-          type="submit"
-          onClick={() => onNext(goToNextStep)}
-          isLoading={isLoading}
-          isDisabled={isLoading}
-        >
+      <>
+        <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
           Async Next
         </Button>
         <Button variant="secondary" onClick={onBack}>
@@ -116,7 +108,7 @@ const StepWithCustomFooter = () => {
         <Button variant="link" onClick={onClose}>
           Cancel
         </Button>
-      </div>
+      </>
     ),
     [isLoading, onBack, onClose, goToNextStep]
   );
diff --git a/packages/react-core/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx b/packages/react-core/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx
new file mode 100644
index 00000000000..ba7121e68f6
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useWizardFooter } from '../useWizardFooter';
+import * as WizardContext from '../../WizardContext';
+
+describe('useWizardFooter', () => {
+  const customFooter = <>My custom footer</>;
+  const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
+  const setFooter = jest.fn();
+
+  it('sets the footer when one is provided without a stepId', () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    renderHook(() => useWizardFooter(customFooter));
+    expect(setFooter).toHaveBeenCalledWith(customFooter);
+  });
+
+  it(`sets the footer when the provided stepId matches the activeStep's id`, () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
+
+    renderHook(() => useWizardFooter(customFooter, 'active-step-id'));
+    expect(setFooter).toHaveBeenCalledWith(customFooter);
+  });
+
+  it(`does not set the footer when the provided stepId does not match the activeStep's id`, () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
+
+    renderHook(() => useWizardFooter(customFooter, 'some-other-step-id'));
+    expect(setFooter).not.toHaveBeenCalled();
+  });
+
+  it('sets the footer to null on unmount', () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    const { unmount } = renderHook(() => useWizardFooter(customFooter));
+    unmount();
+
+    expect(setFooter).toHaveBeenCalledWith(null);
+  });
+
+  it('sets footer with default props instead of react element', () => {
+    const footerProps = { onNext: jest.fn(), onBack: jest.fn(), onClose: jest.fn() };
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    renderHook(() => useWizardFooter(footerProps));
+
+    expect(setFooter).toHaveBeenCalledWith(footerProps);
+  });
+});
diff --git a/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx b/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
index 7910eec9c52..0d7c99b3515 100644
--- a/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
+++ b/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { DefaultWizardFooterProps } from '../types';
 import { useWizardContext } from '../WizardContext';
 
 /**
@@ -6,7 +8,7 @@ import { useWizardContext } from '../WizardContext';
  * @param footer
  * @param stepId
  */
-export const useWizardFooter = (footer: React.ReactElement, stepId?: string | number) => {
+export const useWizardFooter = (footer: DefaultWizardFooterProps | React.ReactElement, stepId?: string | number) => {
   const { activeStep, setFooter } = useWizardContext();
 
   React.useEffect(() => {
diff --git a/packages/react-core/src/next/components/Wizard/types.tsx b/packages/react-core/src/next/components/Wizard/types.tsx
index 768fdee4f5d..ba7df763962 100644
--- a/packages/react-core/src/next/components/Wizard/types.tsx
+++ b/packages/react-core/src/next/components/Wizard/types.tsx
@@ -57,6 +57,12 @@ export interface DefaultWizardFooterProps {
   backButtonText?: React.ReactNode;
   /** The Cancel button text */
   cancelButtonText?: React.ReactNode;
+  /** Next button callback */
+  onNext?: () => WizardNavStepFunction | void;
+  /** Back button callback */
+  onBack?: () => WizardNavStepFunction | void;
+  /** Cancel link callback */
+  onClose?: () => void;
 }
 
 /** Encompasses all step type variants that are internally controlled by the Wizard. */
@@ -70,7 +76,7 @@ export type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
 
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
-  isOpen: boolean,
+  isExpanded: boolean,
   steps: WizardControlStep[],
   activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
diff --git a/packages/react-core/src/next/components/Wizard/utils.ts b/packages/react-core/src/next/components/Wizard/utils.ts
index 2ec93bb3890..071746f1319 100644
--- a/packages/react-core/src/next/components/Wizard/utils.ts
+++ b/packages/react-core/src/next/components/Wizard/utils.ts
@@ -4,7 +4,7 @@ import { WizardControlStep, WizardNavStepData } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepProps {
-  return props.name !== undefined && props.id !== undefined && props.children !== undefined;
+  return props.name !== undefined && props.id !== undefined;
 }
 
 /**
@@ -14,29 +14,31 @@ function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepPr
  */
 export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
   React.Children.toArray(children).reduce((acc: WizardControlStep[], child) => {
-    if (React.isValidElement(child)) {
-      if (child.type === WizardStep || hasWizardStepProps(child.props)) {
-        // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { steps: subSteps, id, children, ...stepProps } = child.props as WizardStepProps;
+    if (React.isValidElement(child) && (child.type === WizardStep || hasWizardStepProps(child.props))) {
+      // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { steps: subSteps, id, children, ...stepProps } = child.props as WizardStepProps;
 
-        acc.push({
-          id,
-          component: child,
-          ...stepProps,
-          ...(subSteps && {
-            subStepIds: subSteps?.map(subStep => {
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              const { children, ...subStepProps } = subStep.props;
-              acc.push({ ...subStepProps, component: subStep, parentId: id });
+      acc.push({
+        id,
+        component: child,
+        ...stepProps,
+        ...(subSteps && {
+          subStepIds: subSteps?.map(subStep => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { children, ...subStepProps } = subStep.props;
+            acc.push({
+              ...subStepProps,
+              component: subStep,
+              parentId: id
+            });
 
-              return subStep.props.id;
-            })
+            return subStep.props.id;
           })
-        });
-      } else {
-        throw new Error('Wizard only accepts children of type WizardStep');
-      }
+        })
+      });
+    } else {
+      throw new Error('Wizard only accepts children of type WizardStep');
     }
 
     return acc;
diff --git a/yarn.lock b/yarn.lock
index 8ce7dd3f5dd..fcd117df757 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3705,6 +3705,14 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
+"@testing-library/react-hooks@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
+  integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-error-boundary "^3.1.0"
+
 "@testing-library/react@^12.1.5":
   version "12.1.5"
   resolved "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz"
@@ -14357,6 +14365,13 @@ react-dropzone@9.0.0:
     prop-types "^15.6.2"
     prop-types-extra "^1.1.0"
 
+react-error-boundary@^3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"