diff --git a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
index 3eccc2b49257ab..c2521e9b53d692 100644
--- a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
+++ b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
@@ -14,6 +14,12 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Nav: ForwardRefComponent<NavProps>;
 
+// @public
+export const NavCategory: ForwardRefComponent<NavCategoryProps>;
+
+// @public (undocumented)
+export const navCategoryClassNames: SlotClassNames<NavCategorySlots>;
+
 // @public
 export const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps>;
 
@@ -36,6 +42,17 @@ export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & Pick<N
     selected: boolean;
 };
 
+// @public
+export type NavCategoryProps = ComponentProps<NavCategorySlots> & {};
+
+// @public (undocumented)
+export type NavCategorySlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type NavCategoryState = ComponentState<NavCategorySlots>;
+
 // @public (undocumented)
 export const navClassNames: SlotClassNames<NavSlots>;
 
@@ -90,6 +107,23 @@ export const NavSubItem: ForwardRefComponent<NavSubItemProps>;
 // @public (undocumented)
 export const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;
 
+// @public
+export const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
+
+// @public (undocumented)
+export const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSlots>;
+
+// @public
+export type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots> & {};
+
+// @public (undocumented)
+export type NavSubItemGroupSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots>;
+
 // @public
 export type NavSubItemProps = ComponentProps<NavSubItemSlots> & {};
 
@@ -107,27 +141,48 @@ export type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;
 // @public (undocumented)
 export const renderNav_unstable: (state: NavState, contextValues: NavContextValues) => JSX.Element;
 
+// @public
+export const renderNavCategory_unstable: (state: NavCategoryState) => JSX.Element;
+
 // @public
 export const renderNavCategoryItem_unstable: (state: NavCategoryItemState) => JSX.Element;
 
 // @public
 export const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.Element;
 
+// @public
+export const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element;
+
 // @public
 export const useNav_unstable: (props: NavProps, ref: React_2.Ref<HTMLDivElement>) => NavState;
 
+// @public
+export const useNavCategory_unstable: (props: NavCategoryProps, ref: React_2.Ref<HTMLDivElement>) => NavCategoryState;
+
 // @public
 export const useNavCategoryItem_unstable: (props: NavCategoryItemProps, ref: React_2.Ref<HTMLButtonElement>) => NavCategoryItemState;
 
 // @public
 export const useNavCategoryItemStyles_unstable: (state: NavCategoryItemState) => NavCategoryItemState;
 
+// @public
+export const useNavCategoryStyles_unstable: (state: NavCategoryState) => NavCategoryState;
+
 // @public (undocumented)
 export const useNavContext_unstable: () => NavContextValue;
 
+// @public
+export const useNavStyles_unstable: (state: NavState) => NavState;
+
 // @public
 export const useNavSubItem_unstable: (props: NavSubItemProps, ref: React_2.Ref<HTMLDivElement>) => NavSubItemState;
 
+// @public
+export const useNavSubItemGroup_unstable: (props: NavSubItemGroupProps, ref: React_2.Ref<HTMLDivElement>) => NavSubItemGroupState;
+
+// @public
+export const useNavSubItemGroupStyles_unstable: (state: NavSubItemGroupState) => NavSubItemGroupState;
+
 // @public
 export const useNavSubItemStyles_unstable: (state: NavSubItemState) => NavSubItemState;
 
diff --git a/packages/react-components/react-nav-preview/src/NavCategory.ts b/packages/react-components/react-nav-preview/src/NavCategory.ts
new file mode 100644
index 00000000000000..9a355beb78b46c
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/NavCategory.ts
@@ -0,0 +1 @@
+export * from './components/NavCategory/index';
diff --git a/packages/react-components/react-nav-preview/src/NavSubItemGroup.ts b/packages/react-components/react-nav-preview/src/NavSubItemGroup.ts
new file mode 100644
index 00000000000000..5861ea57dc2760
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/NavSubItemGroup.ts
@@ -0,0 +1 @@
+export * from './components/NavSubItemGroup/index';
diff --git a/packages/react-components/react-nav-preview/src/components/Nav/index.ts b/packages/react-components/react-nav-preview/src/components/Nav/index.ts
index 2c7d5ea50a6229..79337d0b9e4403 100644
--- a/packages/react-components/react-nav-preview/src/components/Nav/index.ts
+++ b/packages/react-components/react-nav-preview/src/components/Nav/index.ts
@@ -1,5 +1,5 @@
-export * from './Nav';
-export * from './Nav.types';
-export * from './renderNav';
-export * from './useNav';
-export * from './useNavStyles.styles';
+export { Nav } from './Nav';
+export type { NavSlots, NavProps, OnNavItemSelectData, NavState } from './Nav.types';
+export { renderNav_unstable } from './renderNav';
+export { useNav_unstable } from './useNav';
+export { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.test.tsx b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.test.tsx
new file mode 100644
index 00000000000000..06111b1ddb8a12
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.test.tsx
@@ -0,0 +1,9 @@
+import { isConformant } from '../../testing/isConformant';
+import { NavCategory } from './NavCategory';
+
+describe('NavCategory', () => {
+  isConformant({
+    Component: NavCategory,
+    displayName: 'NavCategory',
+  });
+});
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.tsx b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.tsx
new file mode 100644
index 00000000000000..be9524e0837369
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavCategory_unstable } from './useNavCategory';
+import { renderNavCategory_unstable } from './renderNavCategory';
+import { useNavCategoryStyles_unstable } from './useNavCategoryStyles.styles';
+import type { NavCategoryProps } from './NavCategory.types';
+
+/**
+ * NavCategory component - TODO: add more docs
+ */
+export const NavCategory: ForwardRefComponent<NavCategoryProps> = React.forwardRef((props, ref) => {
+  const state = useNavCategory_unstable(props, ref);
+
+  useNavCategoryStyles_unstable(state);
+  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+  // useCustomStyleHook_unstable('useNavCategoryStyles_unstable')(state);
+  return renderNavCategory_unstable(state);
+});
+
+NavCategory.displayName = 'NavCategory';
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.types.ts b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.types.ts
new file mode 100644
index 00000000000000..9255f3b5f77494
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/NavCategory.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type NavCategorySlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * NavCategory Props
+ */
+export type NavCategoryProps = ComponentProps<NavCategorySlots> & {};
+
+/**
+ * State used in rendering NavCategory
+ */
+export type NavCategoryState = ComponentState<NavCategorySlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavCategoryProps.
+// & Required<Pick<NavCategoryProps, 'propName'>>
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/index.ts b/packages/react-components/react-nav-preview/src/components/NavCategory/index.ts
new file mode 100644
index 00000000000000..09f43af2a3f040
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/index.ts
@@ -0,0 +1,5 @@
+export { NavCategory } from './NavCategory';
+export type { NavCategorySlots, NavCategoryProps, NavCategoryState } from './NavCategory.types';
+export { renderNavCategory_unstable } from './renderNavCategory';
+export { useNavCategory_unstable } from './useNavCategory';
+export { useNavCategoryStyles_unstable, navCategoryClassNames } from './useNavCategoryStyles.styles';
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/renderNavCategory.tsx b/packages/react-components/react-nav-preview/src/components/NavCategory/renderNavCategory.tsx
new file mode 100644
index 00000000000000..b7181b758e0c93
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/renderNavCategory.tsx
@@ -0,0 +1,15 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { NavCategoryState, NavCategorySlots } from './NavCategory.types';
+
+/**
+ * Render the final JSX of NavCategory
+ */
+export const renderNavCategory_unstable = (state: NavCategoryState) => {
+  assertSlots<NavCategorySlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <state.root />;
+};
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategory.ts b/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategory.ts
new file mode 100644
index 00000000000000..6be050e8b4e6ce
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategory.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import type { NavCategoryProps, NavCategoryState } from './NavCategory.types';
+
+/**
+ * Create the state required to render NavCategory.
+ *
+ * The returned state can be modified with hooks such as useNavCategoryStyles_unstable,
+ * before being passed to renderNavCategory_unstable.
+ *
+ * @param props - props from this instance of NavCategory
+ * @param ref - reference to root HTMLDivElement of NavCategory
+ */
+export const useNavCategory_unstable = (props: NavCategoryProps, ref: React.Ref<HTMLDivElement>): NavCategoryState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+  };
+};
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategoryStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategoryStyles.styles.ts
new file mode 100644
index 00000000000000..6afb3db11b4c3a
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavCategory/useNavCategoryStyles.styles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { NavCategorySlots, NavCategoryState } from './NavCategory.types';
+
+export const navCategoryClassNames: SlotClassNames<NavCategorySlots> = {
+  root: 'fui-NavCategory',
+  // TODO: add class names for all slots on NavCategorySlots.
+  // Should be of the form `<slotName>: 'fui-NavCategory__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the NavCategory slots based on the state
+ */
+export const useNavCategoryStyles_unstable = (state: NavCategoryState): NavCategoryState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(navCategoryClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-nav-preview/src/components/NavCategoryItem/index.ts b/packages/react-components/react-nav-preview/src/components/NavCategoryItem/index.ts
index 720acffd9a44d2..68a951f74a5191 100644
--- a/packages/react-components/react-nav-preview/src/components/NavCategoryItem/index.ts
+++ b/packages/react-components/react-nav-preview/src/components/NavCategoryItem/index.ts
@@ -1,5 +1,5 @@
-export * from './NavCategoryItem';
-export * from './NavCategoryItem.types';
-export * from './renderNavCategoryItem';
-export * from './useNavCategoryItem';
-export * from './useNavCategoryItem.styles';
+export { NavCategoryItem } from './NavCategoryItem';
+export type { NavCategoryItemSlots, NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';
+export { renderNavCategoryItem_unstable } from './renderNavCategoryItem';
+export { useNavCategoryItem_unstable } from './useNavCategoryItem';
+export { useNavCategoryItemStyles_unstable, navCategoryItemClassNames } from './useNavCategoryItem.styles';
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx
new file mode 100644
index 00000000000000..5c36d7e19bf087
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx
@@ -0,0 +1,9 @@
+import { isConformant } from '../../testing/isConformant';
+import { NavSubItemGroup } from './NavSubItemGroup';
+
+describe('NavSubItemGroup', () => {
+  isConformant({
+    Component: NavSubItemGroup,
+    displayName: 'NavSubItemGroup',
+  });
+});
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.tsx b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.tsx
new file mode 100644
index 00000000000000..40190ec31ae31f
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+import { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+import { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';
+import type { NavSubItemGroupProps } from './NavSubItemGroup.types';
+
+/**
+ * NavSubItemGroup component - TODO: add more docs
+ */
+export const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {
+  const state = useNavSubItemGroup_unstable(props, ref);
+
+  useNavSubItemGroupStyles_unstable(state);
+  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+  // useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);
+  return renderNavSubItemGroup_unstable(state);
+});
+
+NavSubItemGroup.displayName = 'NavSubItemGroup';
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.types.ts b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.types.ts
new file mode 100644
index 00000000000000..30ba79cfa89c18
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/NavSubItemGroup.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type NavSubItemGroupSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * NavSubItemGroup Props
+ */
+export type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots> & {};
+
+/**
+ * State used in rendering NavSubItemGroup
+ */
+export type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSubItemGroupProps.
+// & Required<Pick<NavSubItemGroupProps, 'propName'>>
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/index.ts b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/index.ts
new file mode 100644
index 00000000000000..eb77cf3395e96f
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/index.ts
@@ -0,0 +1,5 @@
+export { NavSubItemGroup } from './NavSubItemGroup';
+export type { NavSubItemGroupSlots, NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';
+export { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+export { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+export { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/renderNavSubItemGroup.tsx b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/renderNavSubItemGroup.tsx
new file mode 100644
index 00000000000000..e6aa1e875d4f10
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/renderNavSubItemGroup.tsx
@@ -0,0 +1,15 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';
+
+/**
+ * Render the final JSX of NavSubItemGroup
+ */
+export const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {
+  assertSlots<NavSubItemGroupSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <state.root />;
+};
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroup.ts b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroup.ts
new file mode 100644
index 00000000000000..1d67b2442aa7f4
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroup.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';
+
+/**
+ * Create the state required to render NavSubItemGroup.
+ *
+ * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,
+ * before being passed to renderNavSubItemGroup_unstable.
+ *
+ * @param props - props from this instance of NavSubItemGroup
+ * @param ref - reference to root HTMLDivElement of NavSubItemGroup
+ */
+export const useNavSubItemGroup_unstable = (
+  props: NavSubItemGroupProps,
+  ref: React.Ref<HTMLDivElement>,
+): NavSubItemGroupState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+  };
+};
diff --git a/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts
new file mode 100644
index 00000000000000..9cdc5324882fe4
--- /dev/null
+++ b/packages/react-components/react-nav-preview/src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';
+
+export const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSlots> = {
+  root: 'fui-NavSubItemGroup',
+  // TODO: add class names for all slots on NavSubItemGroupSlots.
+  // Should be of the form `<slotName>: 'fui-NavSubItemGroup__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the NavSubItemGroup slots based on the state
+ */
+export const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-nav-preview/src/index.ts b/packages/react-components/react-nav-preview/src/index.ts
index 76bf8f006eecf0..5683f9a6756fb0 100644
--- a/packages/react-components/react-nav-preview/src/index.ts
+++ b/packages/react-components/react-nav-preview/src/index.ts
@@ -1,6 +1,15 @@
-export { Nav, navClassNames, renderNav_unstable, useNav_unstable } from './Nav';
-export type { NavProps, NavSlots, NavState } from './Nav';
-// these should probably be explicity as they are above.
+export { Nav, renderNav_unstable, useNav_unstable, useNavStyles_unstable, navClassNames } from './components/Nav/index';
+export type { NavProps, NavSlots, NavState } from './components/Nav/index';
+
+export {
+  NavCategory,
+  renderNavCategory_unstable,
+  useNavCategory_unstable,
+  useNavCategoryStyles_unstable,
+  navCategoryClassNames,
+} from './components/NavCategory/index';
+export type { NavCategorySlots, NavCategoryProps, NavCategoryState } from './components/NavCategory/index';
+
 export {
   NavCategoryItem,
   navCategoryItemClassNames,
@@ -13,6 +22,7 @@ export type {
   NavCategoryItemSlots,
   NavCategoryItemState,
 } from './components/NavCategoryItem/index';
+
 export { NavProvider, useNavContext_unstable } from './components/NavContext';
 export type {
   NavItemValue,
@@ -22,8 +32,24 @@ export type {
   RegisterNavItemEventHandler,
 } from './components/NavContext.types';
 
-export { NavSubItem } from './components/NavSubItem/NavSubItem';
-export type { NavSubItemSlots, NavSubItemProps, NavSubItemState } from './components/NavSubItem/NavSubItem.types';
-export { renderNavSubItem_unstable } from './components/NavSubItem/renderNavSubItem';
-export { useNavSubItem_unstable } from './components/NavSubItem/useNavSubItem';
-export { useNavSubItemStyles_unstable, navSubItemClassNames } from './components/NavSubItem/useNavSubItemStyles.styles';
+export {
+  NavSubItem,
+  renderNavSubItem_unstable,
+  useNavSubItem_unstable,
+  useNavSubItemStyles_unstable,
+  navSubItemClassNames,
+} from './components/NavSubItem/index';
+export type { NavSubItemSlots, NavSubItemProps, NavSubItemState } from './components/NavSubItem/index';
+
+export {
+  NavSubItemGroup,
+  renderNavSubItemGroup_unstable,
+  useNavSubItemGroup_unstable,
+  useNavSubItemGroupStyles_unstable,
+  navSubItemGroupClassNames,
+} from './components/NavSubItemGroup/index';
+export type {
+  NavSubItemGroupSlots,
+  NavSubItemGroupProps,
+  NavSubItemGroupState,
+} from './components/NavSubItemGroup/index';
diff --git a/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryBestPractices.md b/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryBestPractices.md
new file mode 100644
index 00000000000000..08ff8ddeeb5f86
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryDefault.stories.tsx
new file mode 100644
index 00000000000000..f14e6c5b6151ee
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryDefault.stories.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { NavCategory } from '@fluentui/react-nav-preview';
+import type { NavCategoryProps } from '@fluentui/react-nav-preview';
+
+export const Default = (props: Partial<NavCategoryProps>) => <NavCategory {...props} />;
diff --git a/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryDescription.md b/packages/react-components/react-nav-preview/stories/NavCategory/NavCategoryDescription.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-components/react-nav-preview/stories/NavCategory/index.stories.tsx b/packages/react-components/react-nav-preview/stories/NavCategory/index.stories.tsx
new file mode 100644
index 00000000000000..5c05416a2c4db8
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavCategory/index.stories.tsx
@@ -0,0 +1,18 @@
+import { NavCategory } from '@fluentui/react-nav-preview';
+
+import descriptionMd from './NavCategoryDescription.md';
+import bestPracticesMd from './NavCategoryBestPractices.md';
+
+export { Default } from './NavCategoryDefault.stories';
+
+export default {
+  title: 'Preview Components/NavCategory',
+  component: NavCategory,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupBestPractices.md b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupBestPractices.md
new file mode 100644
index 00000000000000..08ff8ddeeb5f86
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupDefault.stories.tsx
new file mode 100644
index 00000000000000..6eec96f4c7e131
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupDefault.stories.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { NavSubItemGroup } from '@fluentui/react-nav-preview';
+import type { NavSubItemGroupProps } from '@fluentui/react-nav-preview';
+
+export const Default = (props: Partial<NavSubItemGroupProps>) => <NavSubItemGroup {...props} />;
diff --git a/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupDescription.md b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/NavSubItemGroupDescription.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-components/react-nav-preview/stories/NavSubItemGroup/index.stories.tsx b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/index.stories.tsx
new file mode 100644
index 00000000000000..bda49566197c89
--- /dev/null
+++ b/packages/react-components/react-nav-preview/stories/NavSubItemGroup/index.stories.tsx
@@ -0,0 +1,18 @@
+import { NavSubItemGroup } from '@fluentui/react-nav-preview';
+
+import descriptionMd from './NavSubItemGroupDescription.md';
+import bestPracticesMd from './NavSubItemGroupBestPractices.md';
+
+export { Default } from './NavSubItemGroupDefault.stories';
+
+export default {
+  title: 'Preview Components/NavSubItemGroup',
+  component: NavSubItemGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};