Add side navigation documentation

Fixes #1

README.md

@@ -11,7 +11,7 @@ GOV.UK Prototype Components contains the code you need to use common or experime
 | [xGovukAutocomplete](https://x-govuk.github.io/govuk-prototype-components/autocomplete/) | Implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element. |
 | [xGovukMasthead](https://x-govuk.github.io/govuk-prototype-components/masthead/) | Implements the masthead component [used on many GOV.UK product pages](https://github.com/alphagov/product-page-example). |
 | [xGovukRelatedNavigation](https://x-govuk.github.io/govuk-prototype-components/related-navigation) | Implements [related navigation component](https://components.publishing.service.gov.uk/component-guide/related_navigation) found in the `govuk_publishing_components`  gem. |
-| xGovukSideNavigation | Implements the side navigation component used on the GOV.UK Design System website. |
+| [xGovukSideNavigation]((https://x-govuk.github.io/govuk-prototype-components/side-navigation/)) | Implements the side navigation component used on the GOV.UK Design System website. |
 | [xGovukSummaryCard](https://x-govuk.github.io/govuk-prototype-components/summary-card/) | Implements a component [proposed for inclusion in the GOV.UK Design System](https://github.com/alphagov/govuk-design-system-backlog/issues/210). |
 | [xGovukTaskList](https://x-govuk.github.io/govuk-prototype-components/task-list/) | Implements the [task list page pattern documented on the GOV.UK Design System](https://design-system.service.gov.uk/patterns/task-list-pages/). |
 

x-govuk/components/side-navigation/README.md

@@ -0,0 +1,61 @@
+# Side navigation
+
+Implements the side navigation component used on the left hand side of the GOV.UK Design System website.
+
+## Example usage
+
+```njk
+{{ xGovukSideNavigation({
+  visuallyHiddenTitle: 'Navigation',
+  items: [{
+    text: "About this project",
+    href: "/about"
+  }, {
+    text: "Contact us",
+    href: "/contact",
+    current: true,
+    parent: true,
+    children: [{
+      text: "By email",
+      href: "/contact/email",
+    }, {
+      text: "By telephone",
+      href: "/contact/telephone",
+    }]
+  }]
+}) }}
+```
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+Some options are required for the macro to work; these are marked as “Required” in the option description.
+
+If you’re using Nunjucks macros in production with `html` options, or ones ending with `html`, you must sanitise the HTML to protect against [cross-site scripting exploits](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting).
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **items** | array | **Required**. An array of navigation links within the side navigation. See [items](#options-for-items). |
+| **classes** | string | Classes to add to the related navigation. |
+| **attributes** | object | HTML attributes (for example data attributes) to add to the related navigation. |
+| **visuallyHiddenTitle** | string | A hidden title for the side navigation. |
+
+### Options for items
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **text** | string | **Required**. Text of the navigation link. |
+| **href** | array | **Required**. The value of the navigation link’s `href` attribute. |
+| **current** | boolean | Indicate that the item is the current page. |
+| **parent** | boolean | Indicate if the item is a parent. Use when the current item or any of its children are active. |
+| **theme** | string | A name to group items by. If several navigation items share the same theme, they will appear together under that name. |
+| **children** | string | An array of items as child navigation links. See [children](#options-for-children). |
+
+### Options for children
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **text** | string | **Required**. Text of the navigation link. |
+| **href** | array | **Required**. The value of the navigation link’s `href` attribute. |
+| **current** | boolean | Indicate that the item is the current page. |