diff --git a/change/@fluentui-react-nav-preview-dbba66d7-ef68-4cb3-ac4f-dccf895fdd97.json b/change/@fluentui-react-nav-preview-dbba66d7-ef68-4cb3-ac4f-dccf895fdd97.json
new file mode 100644
index 00000000000000..6330f4d3225373
--- /dev/null
+++ b/change/@fluentui-react-nav-preview-dbba66d7-ef68-4cb3-ac4f-dccf895fdd97.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "[BREAKING CHANGE] Replacing NavSize type and size prop with NavDensity type and density prop to avoid collisions with size on base Drawer component. ",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "matejera@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md b/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md
index 183c5222ea6030..70ed49272f741a 100644
--- a/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md
+++ b/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md
@@ -57,7 +57,7 @@ export type AppItemSlots = {
 
 // @public
 export type AppItemState = ComponentState<AppItemSlots> & {
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -77,7 +77,7 @@ export type AppItemStaticSlots = {
 
 // @public
 export type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -117,7 +117,7 @@ export type NavCategoryItemSlots = {
 // @public
 export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & NavCategoryItemContextValue & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -133,7 +133,7 @@ export type NavCategoryState = NavCategoryContextValue & Required<NavCategoryPro
 export const navClassNames: SlotClassNames<NavSlots>;
 
 // @public (undocumented)
-export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'size'> & {
+export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'> & {
     onRegister: RegisterNavItemEventHandler;
     onUnregister: RegisterNavItemEventHandler;
     onSelect: EventHandler<OnNavItemSelectData>;
@@ -153,6 +153,9 @@ export type NavContextValues = {
     nav: NavContextValue;
 };
 
+// @public
+export type NavDensity = 'small' | 'medium';
+
 // @public
 export const NavDivider: ForwardRefComponent<NavDividerProps>;
 
@@ -254,7 +257,7 @@ export type NavItemSlots = {
 // @public
 export type NavItemState = ComponentState<NavItemSlots> & Pick<NavItemProps, 'value'> & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -271,7 +274,7 @@ export type NavProps = ComponentProps<NavSlots> & {
     selectedCategoryValue?: NavItemValue;
     multiple?: boolean;
     onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;
-    size?: NavSize;
+    density?: NavDensity;
 };
 
 // @public (undocumented)
@@ -294,9 +297,6 @@ export type NavSectionHeaderSlots = {
 // @public
 export type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;
 
-// @public
-export type NavSize = 'small' | 'medium';
-
 // @public (undocumented)
 export type NavSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -344,7 +344,7 @@ export type NavSubItemSlots = {
 // @public
 export type NavSubItemState = ComponentState<NavSubItemSlots> & Pick<NavSubItemProps, 'value'> & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public (undocumented)
@@ -412,7 +412,7 @@ export type SplitNavItemSlots = {
 
 // @public
 export type SplitNavItemState = ComponentState<SplitNavItemSlots> & {
-    size: NavSize;
+    density: NavDensity;
     isSubNav: boolean;
 };
 
diff --git a/packages/react-components/react-nav-preview/library/src/Nav.ts b/packages/react-components/react-nav-preview/library/src/Nav.ts
index f5f3bad6d018fc..0851ebf53f3b67 100644
--- a/packages/react-components/react-nav-preview/library/src/Nav.ts
+++ b/packages/react-components/react-nav-preview/library/src/Nav.ts
@@ -1,4 +1,4 @@
-export type { NavProps, NavSize, NavSlots, NavState, OnNavItemSelectData } from './components/Nav/index';
+export type { NavProps, NavDensity, NavSlots, NavState, OnNavItemSelectData } from './components/Nav/index';
 export { Nav, navClassNames, renderNav_unstable, useNavStyles_unstable, useNav_unstable } from './components/Nav/index';
 export type {
   NavCategoryItemProps,
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.types.ts b/packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.types.ts
index 87d48798d39a1b..6f3266ef22cfae 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.types.ts
@@ -1,6 +1,6 @@
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 
 export type AppItemSlots = {
   /**
@@ -24,9 +24,9 @@ export type AppItemProps = ComponentProps<AppItemSlots> & { href?: string };
  */
 export type AppItemState = ComponentState<AppItemSlots> & {
   /**
-   * The size of the NavItem
+   * The density of the NavItem
    *
    * @default 'medium'
    */
-  size: NavSize;
+  density: NavDensity;
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts b/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts
index ae6173145e839e..f77e0eeadf0c5a 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts
@@ -20,7 +20,7 @@ export const useAppItem_unstable = (
   const { icon, as, href } = props;
   const rootElementType = as || (href ? 'a' : 'button');
 
-  const { size = 'medium' } = useNavContext_unstable();
+  const { density = 'medium' } = useNavContext_unstable();
 
   const root = slot.always<ARIAButtonSlotProps<'a'>>(
     getIntrinsicElementProps(
@@ -48,6 +48,6 @@ export const useAppItem_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts
index e93f60e5fd0c9f..cbc08bbf8ce74a 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts
@@ -42,13 +42,13 @@ export const useAppItemStyles_unstable = (state: AppItemState): AppItemState =>
   const iconStyles = useIconStyles();
   const appItemSpecificStyles = useAppItemStyles();
 
-  const { size, icon } = state;
+  const { density, icon } = state;
 
   state.root.className = mergeClasses(
     rootDefaultClassName,
     appItemClassNames.root,
     appItemSpecificStyles.root,
-    size === 'small' && appItemSpecificStyles.small,
+    density === 'small' && appItemSpecificStyles.small,
     !icon && appItemSpecificStyles.absentIconRootAdjustment,
     state.root.className,
   );
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.types.ts b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.types.ts
index da9d014f92dbcc..de605b7700b713 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.types.ts
@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 
 export type AppItemStaticSlots = {
   /**
@@ -22,9 +22,9 @@ export type AppItemStaticProps = ComponentProps<AppItemStaticSlots> & {};
  */
 export type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
   /**
-   * The size of the Nav
+   * The density of the Nav
    *
    * @default 'medium'
    */
-  size: NavSize;
+  density: NavDensity;
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts
index c590d540f34c4a..283bbbc51c588b 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts
@@ -18,7 +18,7 @@ export const useAppItemStatic_unstable = (
 ): AppItemStaticState => {
   const { icon } = props;
 
-  const { size = 'medium' } = useNavContext_unstable();
+  const { density = 'medium' } = useNavContext_unstable();
   return {
     components: {
       root: 'div',
@@ -34,6 +34,6 @@ export const useAppItemStatic_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStaticStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStaticStyles.styles.ts
index a8b987af14aae9..2aa8c4b80861e1 100644
--- a/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStaticStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStaticStyles.styles.ts
@@ -32,14 +32,14 @@ export const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppI
   const appItemSpecificStyles = useAppItemStyles();
   const appItemStaticStyles = useAppItemStaticStyles();
 
-  const { size, icon } = state;
+  const { density, icon } = state;
 
   state.root.className = mergeClasses(
     rootDefaultClassName,
     appItemStaticClassNames.root,
     appItemSpecificStyles.root,
     appItemStaticStyles.root,
-    size === 'small' && appItemSpecificStyles.small,
+    density === 'small' && appItemSpecificStyles.small,
     !icon && appItemSpecificStyles.absentIconRootAdjustment,
     state.root.className,
   );
diff --git a/packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts b/packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts
index 2c454797acdba1..1a5a9d8a23551c 100644
--- a/packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts
@@ -8,9 +8,10 @@ export type NavSlots = {
 };
 
 /***
- * Indicates the vertical size of the Nav content.
+ * Indicates the vertical density of the Nav content.
+ * This does not affect horizontal spacing.
  */
-export type NavSize = 'small' | 'medium';
+export type NavDensity = 'small' | 'medium';
 
 /**
  * Nav Props
@@ -76,10 +77,10 @@ export type NavProps = ComponentProps<NavSlots> & {
   onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;
 
   /**
-   * The size and density of the Nav and it's children
+   * The vertical density of the Nav and it's children
    * @default 'medium'
    */
-  size?: NavSize;
+  density?: NavDensity;
 };
 
 export type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {
diff --git a/packages/react-components/react-nav-preview/library/src/components/Nav/index.ts b/packages/react-components/react-nav-preview/library/src/components/Nav/index.ts
index 96192347cd9e18..c07ddb4584da82 100644
--- a/packages/react-components/react-nav-preview/library/src/components/Nav/index.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/Nav/index.ts
@@ -1,5 +1,5 @@
 export { Nav } from './Nav';
-export type { NavSlots, NavProps, OnNavItemSelectData, NavState, NavSize } from './Nav.types';
+export type { NavSlots, NavProps, OnNavItemSelectData, NavState, NavDensity } 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/library/src/components/Nav/useNav.ts b/packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
index 83a8bc502be0a4..ca6424eb556d05 100644
--- a/packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
@@ -59,7 +59,7 @@ export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>)
     onNavItemSelect,
     onNavCategoryItemToggle,
     multiple = true,
-    size = 'medium',
+    density = 'medium',
     openCategories: controlledOpenCategoryItems,
     selectedCategoryValue: controlledSelectedCategoryValue,
     selectedValue: controlledSelectedValue,
@@ -164,6 +164,6 @@ export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>)
     getRegisteredNavItems,
     onRequestNavCategoryItemToggle,
     multiple,
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/NavCategoryItem.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/NavCategoryItem.types.ts
index 3b8b0a9897bbf8..52756e4bc6562f 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/NavCategoryItem.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/NavCategoryItem.types.ts
@@ -1,4 +1,4 @@
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 import { NavCategoryItemContextValue } from '../NavCategoryItemContext';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
@@ -39,9 +39,9 @@ export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &
      */
     selected: boolean;
     /**
-     * The size of the NavItem
+     * The density of the NavItem
      *
      * @default 'medium'
      */
-    size: NavSize;
+    density: NavDensity;
   };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
index 686459e60f1682..26e2d1d95b20d0 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
@@ -51,13 +51,13 @@ export const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState):
   const iconStyles = useIconStyles();
   const expandIconStyles = useExpandIconStyles();
 
-  const { selected, open, size } = state;
+  const { selected, open, density } = state;
 
   state.root.className = mergeClasses(
     navCategoryItemClassNames.root,
     defaultRootClassName,
     rootStyles.base,
-    size === 'small' && smallStyles.root,
+    density === 'small' && smallStyles.root,
     selected && open === false && indicatorStyles.base,
     selected && open === false && contentStyles.selected,
     state.root.className,
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
index 85a06e0e915775..e41b63a5a7349a 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
+++ b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
@@ -22,7 +22,7 @@ export const useNavCategoryItem_unstable = (
 
   const { open, value } = useNavCategoryContext_unstable();
 
-  const { onRequestNavCategoryItemToggle, selectedCategoryValue, size = 'medium' } = useNavContext_unstable();
+  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();
 
   const onNavCategoryItemClick = useEventCallback(
     mergeCallbacks(onClick, event =>
@@ -64,6 +64,6 @@ export const useNavCategoryItem_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavContext.ts b/packages/react-components/react-nav-preview/library/src/components/NavContext.ts
index f0cb4b5af7a71c..dfc0df68cf5bbc 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavContext.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavContext.ts
@@ -32,9 +32,9 @@ const navContextDefaultValue: NavContextValue = {
   multiple: true,
 
   /**
-   * Indicates the size and density of the Nav.
+   * Indicates the vertical density and density of the Nav.
    */
-  size: 'medium',
+  density: 'medium',
 };
 
 const NavContext = React.createContext<NavContextValue | undefined>(undefined);
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavContext.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavContext.types.ts
index 41beee99b9aa05..659424009eae73 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavContext.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavContext.types.ts
@@ -3,7 +3,10 @@ import { EventHandler } from '@fluentui/react-utilities';
 
 import type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';
 
-export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'size'> & {
+export type NavContextValue = Pick<
+  NavProps,
+  'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'
+> & {
   /** A callback to allow a navItem to register itself with the navItem list. */
   onRegister: RegisterNavItemEventHandler;
 
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
index 4c23d1ac19eab7..fd6092408c6e53 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
@@ -25,4 +25,12 @@ export type NavDrawerProps = ComponentProps<NavDrawerSlots> &
 /**
  * State used in rendering NavDrawer
  */
-export type NavDrawerState = DrawerState & NavContextValue;
+export type NavDrawerState = DrawerState &
+  NavContextValue & {
+    /**
+     * Analagous to size from DrawerBaseProps.
+     * Intended to be left unset in most cases.
+     * If left unset, it defaults to 260px.
+     */
+    size?: 'small' | 'medium' | 'large' | 'full';
+  };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
index e0e01144391604..553a6e55ac7234 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
@@ -16,7 +16,7 @@ import type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';
  * @param ref - reference to root HTMLDivElement of NavDrawer
  */
 export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {
-  const { tabbable = false } = props;
+  const { tabbable = false, size = undefined } = props;
 
   const focusAttributes = useArrowNavigationGroup({
     axis: 'vertical',
@@ -34,6 +34,7 @@ export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTML
 
   return {
     ...navState,
+    size,
     components: {
       // TODO: remove once React v18 slot API is modified
       // this is a problem with the lack of support for union types on React v18
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawerStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawerStyles.styles.ts
index 9c206c0627f120..9e448574200b16 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawerStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawerStyles.styles.ts
@@ -13,10 +13,14 @@ export const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfac
  */
 const useStyles = makeStyles({
   root: {
-    width: '260px', // per spec
     backgroundColor: navItemTokens.backgroundColor,
     alignItems: 'unset',
   },
+  // seperate style so it can be applied conditionally
+  // if size is not set, use default width from the token.
+  defaultWidth: {
+    width: `${navItemTokens.defaultDrawerWidth}px`,
+  },
 });
 
 /**
@@ -25,8 +29,15 @@ const useStyles = makeStyles({
 export const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {
   'use no memo';
 
+  const { size } = state;
+
   const styles = useStyles();
-  state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    navDrawerClassNames.root,
+    styles.root,
+    !size && styles.defaultWidth,
+    state.root.className,
+  );
 
   return state;
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavItem/NavItem.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavItem/NavItem.types.ts
index c4248ee931023d..97e39d7fe62a1e 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavItem/NavItem.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavItem/NavItem.types.ts
@@ -1,5 +1,5 @@
 import { NavItemValue } from '../NavContext.types';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
@@ -40,9 +40,9 @@ export type NavItemState = ComponentState<NavItemSlots> &
     selected: boolean;
 
     /**
-     * The size of the NavItem
+     * The density of the NavItem
      *
      * @default 'medium'
      */
-    size: NavSize;
+    density: NavDensity;
   };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts
index ec66e38d7ed3bf..d4c798594ffa65 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts
@@ -21,7 +21,7 @@ export const useNavItem_unstable = (
 ): NavItemState => {
   const { onClick, value, icon, as, href } = props;
 
-  const { selectedValue, onRegister, onUnregister, onSelect, size = 'medium' } = useNavContext_unstable();
+  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();
 
   const rootElementType = as || (href ? 'a' : 'button');
 
@@ -76,6 +76,6 @@ export const useNavItem_unstable = (
     }),
     selected,
     value,
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItemStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItemStyles.styles.ts
index f515ef35ce37e2..4e6c990fe5319c 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItemStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItemStyles.styles.ts
@@ -26,12 +26,12 @@ export const useNavItemStyles_unstable = (state: NavItemState): NavItemState =>
   const indicatorStyles = useIndicatorStyles();
   const iconStyles = useIconStyles();
 
-  const { selected, size } = state;
+  const { selected, density } = state;
 
   state.root.className = mergeClasses(
     navItemClassNames.root,
     rootDefaultClassName,
-    size === 'small' && smallStyles.root,
+    density === 'small' && smallStyles.root,
     selected && indicatorStyles.base,
     selected && contentStyles.selected,
     state.root.className,
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/NavSubItem.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/NavSubItem.types.ts
index 609192d2eb0c8d..519bb8222227a5 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/NavSubItem.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/NavSubItem.types.ts
@@ -2,7 +2,7 @@ import { NavItemValue } from '../NavContext.types';
 
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 
 export type NavSubItemSlots = {
   root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
@@ -29,9 +29,9 @@ export type NavSubItemState = ComponentState<NavSubItemSlots> &
      */
     selected: boolean;
     /**
-     * The size of the NavItem
+     * The density of the NavItem
      *
      * @default 'medium'
      */
-    size: NavSize;
+    density: NavDensity;
   };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts
index fc83644d2ea393..c4cbda8184f09c 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts
@@ -22,7 +22,7 @@ export const useNavSubItem_unstable = (
 ): NavSubItemState => {
   const { onClick, value: subItemValue, as, href } = props;
 
-  const { selectedValue, onRegister, onUnregister, onSelect, size = 'medium' } = useNavContext_unstable();
+  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();
 
   const { value: parentCategoryValue } = useNavCategoryContext_unstable();
 
@@ -78,6 +78,6 @@ export const useNavSubItem_unstable = (
     root,
     selected,
     value: subItemValue,
-    size,
+    density,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItemStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItemStyles.styles.ts
index d65e541d387c74..e46d310101cea2 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItemStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItemStyles.styles.ts
@@ -42,13 +42,13 @@ export const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItem
   const indicatorStyles = useIndicatorStyles();
   const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
 
-  const { selected, size } = state;
+  const { selected, density } = state;
 
   state.root.className = mergeClasses(
     navSubItemClassNames.root,
     rootDefaultClassName,
-    size === 'small' && smallStyles.root,
-    size === 'small' && navSubItemSpecificStyles.smallBase,
+    density === 'small' && smallStyles.root,
+    density === 'small' && navSubItemSpecificStyles.smallBase,
     navSubItemSpecificStyles.base,
     selected && indicatorStyles.base,
     selected && contentStyles.selected,
diff --git a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts
index ad3783f5551ff4..148971b40f943a 100644
--- a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts
@@ -2,7 +2,7 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 import { NavItemProps } from '../NavItem/NavItem.types';
 import { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';
 import type { TooltipProps } from '@fluentui/react-tooltip';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 import { NavSubItemProps } from '../NavSubItem/NavSubItem.types';
 
 export type SplitNavItemSlots = {
@@ -58,11 +58,11 @@ export type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;
  */
 export type SplitNavItemState = ComponentState<SplitNavItemSlots> & {
   /**
-   * The size of the NavItem
+   * The density of the NavItem
    *
    * @default 'medium'
    */
-  size: NavSize;
+  density: NavDensity;
 
   /**
    * A boolean that represents if the main item in the SplitNavItem is a SubNav item.
diff --git a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
index 1fe021228bebfd..65d3d2387f923a 100644
--- a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
+++ b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
@@ -33,7 +33,7 @@ export const useSplitNavItem_unstable = (
     children,
   } = props;
 
-  const { size = 'medium' } = useNavContext_unstable();
+  const { density = 'medium' } = useNavContext_unstable();
 
   const { value: potentialParenValue } = useNavCategoryContext_unstable();
 
@@ -116,7 +116,7 @@ export const useSplitNavItem_unstable = (
     actionButtonTooltip: actionButtonTooltipShorthand,
     toggleButtonTooltip: toggleButtonTooltipShorthand,
     menuButtonTooltip: menuButtonTooltipShorthand,
-    size,
+    density,
     isSubNav,
   };
 };
diff --git a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
index 8faf6d435386c9..d442f4087ef1f0 100644
--- a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
@@ -92,7 +92,7 @@ export const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitN
     state.actionButton.className = mergeClasses(
       splitNavItemClassNames.actionButton,
       splitNavItemStyles.baseSecondary,
-      state.size === 'medium' && splitNavItemStyles.baseMedium,
+      state.density === 'medium' && splitNavItemStyles.baseMedium,
       state.actionButton.className,
     );
   }
@@ -101,7 +101,7 @@ export const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitN
     state.toggleButton.className = mergeClasses(
       splitNavItemClassNames.toggleButton,
       splitNavItemStyles.baseSecondary,
-      state.size === 'medium' && splitNavItemStyles.baseMedium,
+      state.density === 'medium' && splitNavItemStyles.baseMedium,
       state.toggleButton.className,
     );
   }
@@ -110,7 +110,7 @@ export const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitN
     state.menuButton.className = mergeClasses(
       splitNavItemClassNames.menuButton,
       splitNavItemStyles.baseSecondary,
-      state.size === 'medium' && splitNavItemStyles.baseMedium,
+      state.density === 'medium' && splitNavItemStyles.baseMedium,
       state.menuButton.className,
     );
   }
diff --git a/packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts
index b5cb54500dae0b..c2e2ecdbba7623 100644
--- a/packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts
@@ -5,6 +5,7 @@ import { makeResetStyles, makeStyles } from '@griffel/react';
 // Styles shared by several nav components.
 
 export const navItemTokens = {
+  defaultDrawerWidth: 260,
   indicatorOffset: 16,
   indicatorWidth: 4,
   indicatorHeight: 20,
diff --git a/packages/react-components/react-nav-preview/library/src/components/useNavContextValues.tsx b/packages/react-components/react-nav-preview/library/src/components/useNavContextValues.tsx
index 05dde17412aa55..ff06b9c84d2587 100644
--- a/packages/react-components/react-nav-preview/library/src/components/useNavContextValues.tsx
+++ b/packages/react-components/react-nav-preview/library/src/components/useNavContextValues.tsx
@@ -12,7 +12,7 @@ export function useNavContextValues_unstable(state: NavState): NavContextValues
     onRequestNavCategoryItemToggle,
     openCategories,
     multiple,
-    size,
+    density,
   } = state;
 
   const navContext = React.useMemo<NavContextValue>(
@@ -26,7 +26,7 @@ export function useNavContextValues_unstable(state: NavState): NavContextValues
       onRequestNavCategoryItemToggle,
       openCategories,
       multiple,
-      size,
+      density,
     }),
     [
       selectedValue,
@@ -38,7 +38,7 @@ export function useNavContextValues_unstable(state: NavState): NavContextValues
       onRequestNavCategoryItemToggle,
       openCategories,
       multiple,
-      size,
+      density,
     ],
   );
 
diff --git a/packages/react-components/react-nav-preview/library/src/index.ts b/packages/react-components/react-nav-preview/library/src/index.ts
index 843555cbcbd1ba..6a5055e6925fd8 100644
--- a/packages/react-components/react-nav-preview/library/src/index.ts
+++ b/packages/react-components/react-nav-preview/library/src/index.ts
@@ -1,5 +1,5 @@
 export { Nav, renderNav_unstable, useNav_unstable, useNavStyles_unstable, navClassNames } from './components/Nav/index';
-export type { NavProps, NavSlots, NavState, NavSize, OnNavItemSelectData } from './components/Nav/index';
+export type { NavProps, NavSlots, NavState, NavDensity, OnNavItemSelectData } from './components/Nav/index';
 
 export { NavCategory, renderNavCategory_unstable, useNavCategory_unstable } from './components/NavCategory/index';
 export type { NavCategoryProps, NavCategoryState } from './components/NavCategory/index';
diff --git a/packages/react-components/react-nav-preview/stories/src/Nav/index.stories.tsx b/packages/react-components/react-nav-preview/stories/src/Nav/index.stories.tsx
index c63459f634e14b..6b509811b994ad 100644
--- a/packages/react-components/react-nav-preview/stories/src/Nav/index.stories.tsx
+++ b/packages/react-components/react-nav-preview/stories/src/Nav/index.stories.tsx
@@ -5,7 +5,7 @@ import { Nav } from '@fluentui/react-nav-preview';
 // import bestPracticesMd from './NavBestPractices.md';
 
 export { Basic } from '../NavDrawer/Basic.stories';
-export { VariableSizedItems } from '../NavDrawer/VariableSizedItems.stories';
+export { VariableDensityItems } from '../NavDrawer/VariableDensityItems.stories';
 export { Controlled } from '../NavDrawer/Controlled.stories';
 export { SplitNavItems } from '../NavDrawer/SplitNavItems.stories';
 
diff --git a/packages/react-components/react-nav-preview/stories/src/NavDrawer/SplitNavItems.stories.tsx b/packages/react-components/react-nav-preview/stories/src/NavDrawer/SplitNavItems.stories.tsx
index 27f969a0ecbfb9..cddf77819f8143 100644
--- a/packages/react-components/react-nav-preview/stories/src/NavDrawer/SplitNavItems.stories.tsx
+++ b/packages/react-components/react-nav-preview/stories/src/NavDrawer/SplitNavItems.stories.tsx
@@ -7,7 +7,7 @@ import {
   NavDrawerBody,
   NavDrawerHeader,
   NavDrawerProps,
-  NavSize,
+  NavDensity,
   AppItem,
   AppItemStatic,
   SplitNavItem,
@@ -189,7 +189,7 @@ export const SplitNavItems = (props: Partial<NavDrawerProps>) => {
   const appItemIconLabelId = useId('app-item-icon-label');
   const appItemStaticLabelId = useId('app-item-static-label');
 
-  const [size, setNavSize] = React.useState<NavSize>('small');
+  const [density, setNavDensity] = React.useState<NavDensity>('small');
   const [enabledLinks, setEnabledLinks] = React.useState(true);
   const [isAppItemIconPresent, setIsAppItemIconPresent] = React.useState(true);
   const [isAppItemStatic, setIsAppItemStatic] = React.useState(true);
@@ -198,7 +198,7 @@ export const SplitNavItems = (props: Partial<NavDrawerProps>) => {
   const linkDestination = enabledLinks ? 'https://www.bing.com' : '';
 
   const appItemIcon = isAppItemIconPresent ? (
-    size === 'small' ? (
+    density === 'small' ? (
       <PersonCircle24Regular />
     ) : (
       <PersonCircle32Regular />
@@ -295,7 +295,7 @@ export const SplitNavItems = (props: Partial<NavDrawerProps>) => {
 
   return (
     <div className={styles.root}>
-      <NavDrawer defaultSelectedValue="5" open={true} type={'inline'} size={size}>
+      <NavDrawer defaultSelectedValue="5" open={true} density={density} type={'inline'}>
         <NavDrawerHeader>
           <Tooltip content="Navigation" relationship="label">
             <Hamburger />
@@ -310,8 +310,12 @@ export const SplitNavItems = (props: Partial<NavDrawerProps>) => {
       </NavDrawer>
       <div className={styles.content}>
         <div className={styles.field}>
-          <Label id={labelId}>Size</Label>
-          <RadioGroup value={size} onChange={(_, data) => setNavSize(data.value as NavSize)} aria-labelledby={labelId}>
+          <Label id={labelId}>Density</Label>
+          <RadioGroup
+            value={density}
+            aria-labelledby={labelId}
+            onChange={(_, data) => setNavDensity(data.value as NavDensity)}
+          >
             <Radio value="medium" label="Medium" />
             <Radio value="small" label="Small" />
           </RadioGroup>
diff --git a/packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableSizedItems.stories.tsx b/packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableDensityItems.stories.tsx
similarity index 91%
rename from packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableSizedItems.stories.tsx
rename to packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableDensityItems.stories.tsx
index 8109df9c38cb9c..5ee25b36dfd911 100644
--- a/packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableSizedItems.stories.tsx
+++ b/packages/react-components/react-nav-preview/stories/src/NavDrawer/VariableDensityItems.stories.tsx
@@ -11,12 +11,12 @@ import {
   NavSectionHeader,
   NavSubItem,
   NavSubItemGroup,
-  NavSize,
+  NavDensity,
   NavDivider,
   AppItem,
   AppItemStatic,
 } from '@fluentui/react-nav-preview';
-import { Label, Radio, RadioGroup, Switch, Tooltip, makeStyles, tokens, useId } from '@fluentui/react-components';
+import { Label, Switch, Tooltip, makeStyles, tokens, useId, Radio, RadioGroup } from '@fluentui/react-components';
 import {
   Board20Filled,
   Board20Regular,
@@ -45,8 +45,8 @@ import {
   PreviewLink20Filled,
   PreviewLink20Regular,
   bundleIcon,
-  PersonCircle32Regular,
   PersonCircle24Regular,
+  PersonCircle32Regular,
 } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -85,7 +85,7 @@ const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
 const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
 const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
 
-export const VariableSizedItems = (props: Partial<NavDrawerProps>) => {
+export const VariableDensityItems = (props: Partial<NavDrawerProps>) => {
   const styles = useStyles();
 
   const labelId = useId('type-label');
@@ -93,7 +93,7 @@ export const VariableSizedItems = (props: Partial<NavDrawerProps>) => {
   const appItemIconLabelId = useId('app-item-icon-label');
   const appItemStaticLabelId = useId('app-item-static-label');
 
-  const [size, setNavSize] = React.useState<NavSize>('small');
+  const [density, setNavDesnity] = React.useState<NavDensity>('small');
   const [enabledLinks, setEnabledLinks] = React.useState(true);
   const [isAppItemIconPresent, setIsAppItemIconPresent] = React.useState(true);
   const [isAppItemStatic, setIsAppItemStatic] = React.useState(true);
@@ -101,7 +101,7 @@ export const VariableSizedItems = (props: Partial<NavDrawerProps>) => {
   const linkDestination = enabledLinks ? 'https://www.bing.com' : '';
 
   const appItemIcon = isAppItemIconPresent ? (
-    size === 'small' ? (
+    density === 'small' ? (
       <PersonCircle24Regular />
     ) : (
       <PersonCircle32Regular />
@@ -118,7 +118,13 @@ export const VariableSizedItems = (props: Partial<NavDrawerProps>) => {
 
   return (
     <div className={styles.root}>
-      <NavDrawer defaultSelectedValue="7" defaultSelectedCategoryValue="6" open={true} type={'inline'} size={size}>
+      <NavDrawer
+        defaultSelectedValue="7"
+        defaultSelectedCategoryValue="6"
+        open={true}
+        type={'inline'}
+        density={density}
+      >
         <NavDrawerHeader>
           <Tooltip content="Navigation" relationship="label">
             <Hamburger />
@@ -199,11 +205,16 @@ export const VariableSizedItems = (props: Partial<NavDrawerProps>) => {
       </NavDrawer>
       <div className={styles.content}>
         <div className={styles.field}>
-          <Label id={labelId}>Size</Label>
-          <RadioGroup value={size} onChange={(_, data) => setNavSize(data.value as NavSize)} aria-labelledby={labelId}>
+          <Label id={labelId}>Density</Label>
+          <RadioGroup
+            value={density}
+            aria-labelledby={labelId}
+            onChange={(_, data) => setNavDesnity(data.value as NavDensity)}
+          >
             <Radio value="medium" label="Medium" />
             <Radio value="small" label="Small" />
           </RadioGroup>
+
           <Label id={linkLabelId}>Links</Label>
           <Switch
             checked={enabledLinks}