diff --git a/styles/src/index.ts b/styles/src/index.ts
index 7909b14d..4c3d395c 100644
--- a/styles/src/index.ts
+++ b/styles/src/index.ts
@@ -1,3 +1,4 @@
+export * from "./navigation/navigation.styles";
 export * from "./static/static.styles";
 export * from "./tab-list/tab-list.styles";
 export * from "./tab-list/tab.styles";
diff --git a/styles/src/navigation/navigation.styles.ts b/styles/src/navigation/navigation.styles.ts
new file mode 100644
index 00000000..076553a4
--- /dev/null
+++ b/styles/src/navigation/navigation.styles.ts
@@ -0,0 +1,36 @@
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+
+/**
+ * How to use:
+ * ```
+ * <div className={navStyles.container}>
+ *   <TabList
+ *     className={navStyles.tabList}
+ *     size="large"
+ *     vertical
+ *   >
+ *     <Tab />
+ *     <Tab />
+ *     <div className={navStyles.spacer}/>
+ *     <Tab />
+ *   </TabList>
+ * </div>
+ * ```
+ */
+export const useNavigationStyles = makeStyles({
+  container: {
+    ...shorthands.padding(
+      tokens.spacingVerticalXXL,
+      tokens.spacingHorizontalS,
+      tokens.spacingVerticalL
+    ),
+    backgroundColor: tokens.colorNeutralBackground4,
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  tabList: {
+    height: "100%",
+    rowGap: tokens.spacingVerticalXS,
+  },
+});