update docs

primer · Feb 16, 2023 · 2347578 · 2347578
1 parent 2f84bb8
commit 2347578
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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>