add subnav api

guardian · May 13, 2022 · f33c6cf · f33c6cf
1 parent 9dd5750
commit f33c6cf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/docs/rfcs/header-component-api.md b/docs/rfcs/header-component-api.md
@@ -285,6 +285,46 @@ A visually prominent navigational link that appears in the `Navigation.Secondary
 -   `label` _string_
     -   display label of the `Navigation.SecondaryLinksSupplementalLink`
 
+### `<Subnav />`
+
+A navigation for sub-categories below the current top-level category.
+
+![Subnav](images/header-component-api/subnav.png)
+
+#### Example
+
+```jsx
+<Subnav>
+    <Subnav.Link
+        label="UK"
+        href="https://www.theguardian.com/uk"
+    / >
+    <Subnav.Link
+        label="World"
+        href="https://www.theguardian.com/world"
+    / >
+<Subnav/>
+```
+
+#### `<Subnav.Link />`
+
+A navigational link that appears in the `Subnav` component
+
+![Subnav](images/header-component-api/subnav-link.png)
+
+##### Example
+
+```jsx
+<Subnav.Link label="UK politics" href="https://www.theguardian.com/politics" />
+```
+
+##### Props
+
+-   `href` _string_
+    -   navigation location when `Subnav.Link` is clicked
+-   `label` _string_
+    -   display label of the `Subnav.Link`
+
 ## Specialised headers
 
 ### `<EditorialHeader />`

diff --git a/docs/rfcs/images/header-component-api/subnav-link.png b/docs/rfcs/images/header-component-api/subnav-link.png
diff --git a/docs/rfcs/images/header-component-api/subnav.png b/docs/rfcs/images/header-component-api/subnav.png