From 6ed5cd5b53cd52afeb6055b9ab04679a9ef0973d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <gh@d0h.co>
Date: Fri, 20 May 2022 12:50:34 +0100
Subject: [PATCH] :memo: Adds sub-items docs

---
 docs/pages-and-sections.md | 40 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/docs/pages-and-sections.md b/docs/pages-and-sections.md
index ad19faf2..f55c62f6 100644
--- a/docs/pages-and-sections.md
+++ b/docs/pages-and-sections.md
@@ -56,3 +56,43 @@ The following example shows creating a config, publishing it as a [Gist](https:/
 Only top-level fields supported by sub-pages are `pageInfo` and `sections`. The `appConfig` and `pages` will always be inherited from your main `conf.yml` file. Other than that, sub-pages behave exactly the same as your default view, and can contain sections, items, widgets and page info like nav links, title and logo.
 
 Note that since page paths are required by the router, they are set at build-time, not run-time, and so a rebuild (happens automatically) is required for changes to page paths to take effect (this only applies to changes to the `pages` array, rebuild isn't required for editing page content).
+
+
+## Sub-Items
+
+A normal section will contain zero or more items, for example:
+
+```yaml
+- name: Coding
+  icon: far fa-code
+  items:
+  - title: GitHub
+    url: https://github.com/
+  - title: StackOverflow
+    url: http://stackoverflow.com/
+```
+
+But items can also be grouped together, referred to as sub-items. This is useful for a group of less frequently used items, which you don't want to take up too much space, or for action buttons (_coming soon_).
+
+Item groups may also have an optional title.
+
+```yaml
+- name: Coding
+  icon: far fa-code
+  items:
+  - title: Normal Item 1
+  - title: Normal Item 2
+  - subItems:
+    - title: JavaScript
+      url: https://developer.mozilla.org
+      icon: si-javascript
+    - title: TypeScript
+      url: https://www.typescriptlang.org/docs
+      icon: si-typescript
+    - title: Svelt
+      url: https://svelte.dev/docs
+      icon: si-svelte
+    - title: Go
+      url: https://go.dev/doc
+      icon: si-go
+```