diff --git a/src/app/components/nav-item/NavItem.tsx b/src/app/components/nav-item/NavItem.tsx
new file mode 100644
index 00000000..1ac7595f
--- /dev/null
+++ b/src/app/components/nav-item/NavItem.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import React from 'react';
+import { as } from 'folds';
+import * as css from './styles.css';
+
+export const NavItem = as<
+  'div',
+  {
+    highlight?: boolean;
+  } & css.RoomSelectorVariants
+>(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
+  <AsNavItem
+    className={classNames(css.NavItem({ variant, radii }), className)}
+    data-highlight={highlight}
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </AsNavItem>
+));
diff --git a/src/app/components/nav-item/NavItemContent.tsx b/src/app/components/nav-item/NavItemContent.tsx
new file mode 100644
index 00000000..dcd0edfd
--- /dev/null
+++ b/src/app/components/nav-item/NavItemContent.tsx
@@ -0,0 +1,10 @@
+import React, { ComponentProps } from 'react';
+import { Text, as } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
+  )
+);
diff --git a/src/app/components/nav-item/index.ts b/src/app/components/nav-item/index.ts
new file mode 100644
index 00000000..7611c8d8
--- /dev/null
+++ b/src/app/components/nav-item/index.ts
@@ -0,0 +1,2 @@
+export * from './NavItem';
+export * from './NavItemContent';