diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx
new file mode 100644
index 00000000000..298ed0b3473
--- /dev/null
+++ b/docs/content/NavList.mdx
@@ -0,0 +1,523 @@
+---
+title: NavList
+status: Draft
+description: Use nav list to render a vertical list of navigation links.
+---
+
+Not implemented yet
+
+To render a horizontal list of navigation links, consider using [UnderlineNav](/UnderlineNav).
+
+## Examples
+
+### Simple
+
+```jsx
+
+
+ Dashboard
+
+ Pull requests
+ Issues
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With leading icons
+
+```jsx
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+ Pull requests
+
+
+
+
+
+ Issues
+
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With other leading visuals
+
+```jsx
+
+
+ #️⃣
+ General
+
+
+ 🙏
+ Q&A
+
+
+ 🙌
+ Show and tell
+
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With trailing visuals
+
+```jsx
+
+
+ Inbox
+ 1,234
+
+ Saved
+ Done
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With a heading
+
+```jsx
+<>
+ Workflows
+
+
+ All workflows
+
+ CI
+ Deploy
+ Release
+
+
+```
+
+
+ Rendered HTML
+
+```html
+Workflows
+
+```
+
+
+
+### With aria-label
+
+```jsx
+
+
+ Overview
+
+ Security policy
+ Security advisories
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With groups
+
+```jsx
+
+
+
+ Getting started
+
+
+
+ Avatar
+ Button
+ Label
+
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With sub-items
+
+```jsx
+
+ Branches
+ Tags
+
+ Actions
+
+ General
+ Runners
+
+
+
+```
+
+
+
+If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render as a `
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With a divider
+
+```jsx
+
+ Dashboard
+ Pull requests
+ Issues
+
+ Marketplace
+ Explore
+
+```
+
+
+ Rendered HTML
+
+```html
+
+```
+
+
+
+### With React Router
+
+```jsx
+import {Link, useMatch, useResolvedPath} from 'react-router-dom'
+import {NavList} from '@primer/react'
+
+function NavItem({to, children}) {
+ const resolved = useResolvedPath(to)
+ const isCurrent = useMatch({path: resolved.pathname, end: true})
+ return (
+
+ {children}
+
+ )
+}
+
+function App() {
+ return (
+
+ Dashboard
+ Pull requests
+ Issues
+
+ )
+}
+```
+
+### With Next.js
+
+```jsx
+import {useRouter} from 'next/router'
+import Link from 'next/link'
+import {NavList} from '@primer/react'
+
+function NavItem({href, children}) {
+ const router = useRouter()
+ const isCurrent = router.asPath === href
+ return (
+
+ {children}
+
+ )
+}
+
+function App() {
+ return (
+
+ Dashboard
+ Pull requests
+ Issues
+
+ )
+}
+```
+
+## Props
+
+### NavList
+
+
+
+
+
+
+
+
+### NavList.Item
+
+
+
+ The URL that the item navigates to. href is passed to the underlying{' '}
+ <a> element. If as is specified, the component may need
+ different props. If the item contains a sub-nav, the item is rendered as a{' '}
+ <button> and href is ignored.
+
+ }
+ />
+
+ Set aria-current to "page" to indicate that the item
+ represents the current page. Set aria-current to "location" to
+ indicate that the item represents the current location on a page. For more information about{' '}
+ aria-current, see{' '}
+ MDN.
+
+ }
+ />
+ MDN
+ }
+ elementType="a"
+ isPolymorphic
+ refType="HTMLAnchorElement"
+ />
+
+
+### NavList.LeadingVisual
+
+
+
+
+
+
+### NavList.TrailingVisual
+
+
+
+
+
+
+### NavList.SubNav
+
+
+
+
+
+
+### NavList.Group
+
+
+ {/* Should `title` be required? */}
+
+
+
+
+### NavList.Divider
+
+
+
+
+
+
+## Status
+
+