From 2347578add576b2ff292b6b523569962385b2f84 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 16 Feb 2023 15:25:22 +1000
Subject: [PATCH] update docs

---
 docs/content/drafts/PageHeader.mdx  | 24 ++++++++++++++++++++++++
 src/PageHeader/features.stories.tsx |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
index b16684f384f..6eaef75d158 100644
--- a/docs/content/drafts/PageHeader.mdx
+++ b/docs/content/drafts/PageHeader.mdx
@@ -121,6 +121,8 @@ import {PageHeader} from '@primer/react/drafts'
 
 ### With navigation slot
 
+#### Utilizing a Navigation component
+
 ```jsx live drafts
 <PageHeader>
   <PageHeader.TitleArea>
@@ -145,6 +147,28 @@ import {PageHeader} from '@primer/react/drafts'
 </PageHeader>
 ```
 
+#### Utilizing a custom navigation
+
+```jsx live drafts
+<PageHeader>
+  <PageHeader.TitleArea>
+    <PageHeader.Title>Page Title</PageHeader.Title>
+  </PageHeader.TitleArea>
+  <PageHeader.Navigation as="nav" aria-label="Item list">
+    <Box as="ul" sx={{display: 'flex', gap: '8px', listStyle: 'none', paddingY: 0, paddingX: 3}} role="list">
+      <li>
+        <Link href="#" aria-current="page">
+          Item 1
+        </Link>
+      </li>
+      <li>
+        <Link href="#">Item 2</Link>
+      </li>
+    </Box>
+  </PageHeader.Navigation>
+</PageHeader>
+```
+
 ### With ContextArea
 
 #### With parent link and actions (only visible on mobile)
diff --git a/src/PageHeader/features.stories.tsx b/src/PageHeader/features.stories.tsx
index bc177a86879..f64c4db5c1e 100644
--- a/src/PageHeader/features.stories.tsx
+++ b/src/PageHeader/features.stories.tsx
@@ -154,7 +154,7 @@ export const WithCustomNavigation = () => (
         <PageHeader.Title>Pull request title</PageHeader.Title>
       </PageHeader.TitleArea>
       <PageHeader.Navigation as="nav" aria-label="Item list">
-        <ul>
+        <Box as="ul" sx={{display: 'flex', gap: '8px', listStyle: 'none', paddingY: 0, paddingX: 3}} role="list">
           <li>
             <Link href="#" aria-current="page">
               Item 1
@@ -163,7 +163,7 @@ export const WithCustomNavigation = () => (
           <li>
             <Link href="#">Item 2</Link>
           </li>
-        </ul>
+        </Box>
       </PageHeader.Navigation>
     </PageHeader>
   </Box>