diff --git a/app/components/header.tsx b/app/components/header.tsx
index 3e2d59a..dd95574 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import type { MenuLink } from '~/types'
 import { Link } from '~/components/link'
 import { Logo } from '~/components/logo'
-import { Nav } from '~/components/navMenu'
+import { Nav } from '~/components/nav'
 
 const menuLinks: MenuLink[] = [
   {
diff --git a/app/components/nav/index.ts b/app/components/nav/index.ts
new file mode 100644
index 0000000..88e601a
--- /dev/null
+++ b/app/components/nav/index.ts
@@ -0,0 +1,2 @@
+export { default as Nav } from './nav'
+export { default as NavMenu } from './nav-menu'
diff --git a/app/components/navMenu.tsx b/app/components/nav/nav-menu.tsx
similarity index 84%
rename from app/components/navMenu.tsx
rename to app/components/nav/nav-menu.tsx
index 3ef392d..6335b44 100644
--- a/app/components/navMenu.tsx
+++ b/app/components/nav/nav-menu.tsx
@@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/solid'
 import type { NavMenuProps } from '~/types'
 import { Link } from '~/components/link'
 
-export const NavMenu = ({ as = 'div', children, className, link }: NavMenuProps) => (
+const NavMenu = ({ as = 'div', children, className, link }: NavMenuProps) => (
   <Menu as={as} className={clsx('relative inline-block text-left', className)}>
     <Menu.Button className="inline-flex justify-center rounded-md bg-black bg-opacity-0 px-3 py-2 text-base uppercase tracking-wide text-primary-900 hover:bg-opacity-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
       <span>{link.name}</span>
@@ -49,17 +49,4 @@ export const NavMenu = ({ as = 'div', children, className, link }: NavMenuProps)
   </Menu>
 )
 
-interface NavProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export class Nav extends React.Component<NavProps, {}> {
-  static Menu = NavMenu
-
-  render() {
-    const { children, className } = this.props
-
-    return <nav className={className}>{children}</nav>
-  }
-}
+export default NavMenu
diff --git a/app/components/nav/nav.tsx b/app/components/nav/nav.tsx
new file mode 100644
index 0000000..248bdf8
--- /dev/null
+++ b/app/components/nav/nav.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import NavMenu from './nav-menu'
+
+interface NavProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function Nav({ children, className }: NavProps) {
+  return <nav className={className}>{children}</nav>
+}
+
+export default Object.assign(Nav, {
+  Menu: NavMenu,
+})