diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 45b89de78..04c3dabe3 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { Fragment, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
@@ -11,53 +11,69 @@ import styles from './Sidebar.module.scss';
 
 // recursively create navigation
 const renderNav = (pages, depthLevel = 0) => {
-  return pages.map((page, index) => {
-    const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-    const [isExpanded, setIsExpanded] = useState(
-      crumbs.length === depthLevel || crumbs.includes(page.displayName)
-    );
-    const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+  const crumbs = useContext(BreadcrumbContext).map((x) => x.displayName);
 
-    return (
-      <li
-        className={cx(styles[`navDepth${depthLevel}`], {
-          [styles.isCurrentPage]: isCurrentPage,
-        })}
-        key={index}
-      >
-        {page.url ? (
-          <Link className={styles.navItem} to={page.url}>
-            {page.displayName}
-            {isCurrentPage && (
-              <FeatherIcon
-                className={styles.currentPageIndicator}
-                name="chevron-right"
-              />
-            )}
-          </Link>
-        ) : (
-          <div
-            className={styles.navItem}
-            role="button"
-            onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
-            onKeyPress={() => setIsExpanded((isExpanded) => !isExpanded)}
-            tabIndex={0}
-          >
-            {page.displayName}
-          </div>
-        )}
-        {page.children && (
-          <ul
-            className={cx(styles.nestedNav, {
-              [styles.isExpanded]: isExpanded,
-            })}
+  const groupedPages = pages.reduce((groups, page) => {
+    const { group = '' } = page;
+
+    return {
+      ...groups,
+      [group]: [...(groups[group] || []), page],
+    };
+  }, {});
+
+  return Object.entries(groupedPages).map(([group, pages]) => (
+    <Fragment key={group}>
+      {group && (
+        <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
+      )}
+      {pages.map((page) => {
+        const [isExpanded, setIsExpanded] = useState(
+          crumbs.includes(page.displayName)
+        );
+        const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+
+        return (
+          <li
+            key={page.displayName}
+            data-depth={depthLevel}
+            className={cx({ [styles.isCurrentPage]: isCurrentPage })}
           >
-            {renderNav(page.children, depthLevel + 1)}
-          </ul>
-        )}
-      </li>
-    );
-  });
+            {page.url ? (
+              <Link className={styles.navLink} to={page.url}>
+                {page.displayName}
+                {isCurrentPage && (
+                  <FeatherIcon
+                    className={styles.currentPageIndicator}
+                    name="chevron-right"
+                  />
+                )}
+              </Link>
+            ) : (
+              <div
+                role="button"
+                className={styles.navLink}
+                onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
+                onKeyPress={() => setIsExpanded((isExpanded) => !isExpanded)}
+                tabIndex={0}
+              >
+                {page.displayName}
+              </div>
+            )}
+            {page.children && (
+              <ul
+                className={cx(styles.nestedNav, {
+                  [styles.isExpanded]: isExpanded,
+                })}
+              >
+                {renderNav(page.children, depthLevel + 1)}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+    </Fragment>
+  ));
 };
 
 const Sidebar = ({ className, pages, isOpen }) => (
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 94b880988..23d324c6e 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -54,39 +54,32 @@
   padding-left: 0;
 }
 
-.navItem {
-  color: var(--color-black);
+.navLink {
+  color: var(--color-neutrals-900);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
+
+  [data-depth='0'] > & {
+    font-weight: bold;
+  }
 }
 
 .currentPageIndicator {
   stroke-width: 4;
 }
 
-.navDepth0 {
-  color: var(--color-black);
-  font-weight: bold;
-}
-
-.navDepth1 {
-  font-weight: normal;
-}
-
-.navDepth2 {
+.groupName {
+  color: var(--color-neutrals-600);
   font-weight: bold;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  color: var(--color-neutrals-600);
-  font-size: 14px;
-}
 
-.navDepth3 {
-  font-weight: normal;
-  text-transform: initial;
-  color: var(--color-black);
+  &:not(:first-child) {
+    margin-top: 2rem;
+  }
 }
 
 .isCurrentPage {
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 3b53b290b..c729cb9c6 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -95,358 +95,384 @@
         "displayName": "Component library",
         "children": [
           {
-            "displayName": "Controls",
-            "children": [
-              {
-                "displayName": "AccountPicker",
-                "url": "/components/account-picker"
-              },
-              {
-                "displayName": "Button",
-                "url": "/components/button"
-              },
-              {
-                "displayName": "Checkbox",
-                "url": "/components/checkbox"
-              },
-              {
-                "displayName": "Dropdown",
-                "url": "/components/dropdown"
-              },
-              {
-                "displayName": "DropdownItem",
-                "url": "/components/dropdown-item"
-              },
-              {
-                "displayName": "Radio",
-                "url": "/components/radio"
-              },
-              {
-                "displayName": "RadioGroup",
-                "url": "/components/radio-group"
-              },
-              {
-                "displayName": "Select",
-                "url": "/components/select"
-              },
-              {
-                "displayName": "SelectItem",
-                "url": "/components/select-item"
-              },
-              {
-                "displayName": "TextField",
-                "url": "/components/text-field"
-              }
-            ]
-          },
-          {
-            "displayName": "Tables",
-            "children": [
-              {
-                "displayName": "Table",
-                "url": "/components/table"
-              },
-              {
-                "displayName": "TableHeader",
-                "url": "/components/table-header"
-              },
-              {
-                "displayName": "TableHeaderCell",
-                "url": "/components/table-header-cell"
-              },
-              {
-                "displayName": "TableRow",
-                "url": "/components/table-row"
-              },
-              {
-                "displayName": "TableRowCell",
-                "url": "/components/table-row-cell"
-              },
-              {
-                "displayName": "EntityTitleTableRowCell",
-                "url": "/components/entity-title-table-row-cell"
-              },
-              {
-                "displayName": "MetricTableRowCell",
-                "url": "/components/metric-table-row-cell"
-              },
-              {
-                "displayName": "SparklineTableRowCell",
-                "url": "/components/sparkline-table-row-cell"
-              },
-              {
-                "displayName": "UserTableRowCell",
-                "url": "/components/user-table-row-cell"
-              }
-            ]
-          },
-          {
-            "displayName": "Feedback",
-            "children": [
-              {
-                "displayName": "Icon",
-                "url": "/components/icon"
-              },
-              {
-                "displayName": "Spinner",
-                "url": "/components/spinner"
-              },
-              {
-                "displayName": "Toast",
-                "url": "/components/toast"
-              }
-            ]
-          },
-          {
-            "displayName": "Overlays",
-            "children": [
-              {
-                "displayName": "Modal",
-                "url": "/components/modal"
-              },
-              {
-                "displayName": "Tooltip",
-                "url": "/components/tooltip"
-              }
-            ]
-          },
-          {
-            "displayName": "Structure",
-            "children": [
-              {
-                "displayName": "AutoSizer",
-                "url": "/components/auto-sizer"
-              },
-              {
-                "displayName": "Card",
-                "url": "/components/card"
-              },
-              {
-                "displayName": "CardBody",
-                "url": "/components/card-body"
-              },
-              {
-                "displayName": "CardHeader",
-                "url": "/components/card-header"
-              },
-              {
-                "displayName": "Grid",
-                "url": "/components/grid"
-              },
-              {
-                "displayName": "GridItem",
-                "url": "/components/grid-item"
-              },
-              {
-                "displayName": "List",
-                "url": "/components/list"
-              },
-              {
-                "displayName": "ListItem",
-                "url": "/components/list-item"
-              },
-              {
-                "displayName": "Spacing",
-                "url": "/components/spacing"
-              },
-              {
-                "displayName": "Stack",
-                "url": "/components/stack"
-              },
-              {
-                "displayName": "StackItem",
-                "url": "/components/stack-item"
-              },
-              {
-                "displayName": "Tabs",
-                "url": "/components/tabs"
-              },
-              {
-                "displayName": "TabsItem",
-                "url": "/components/tabs-item"
-              }
-            ]
-          },
-          {
-            "displayName": "Text",
-            "children": [
-              {
-                "displayName": "Text Components",
-                "children": [
-                  {
-                    "displayName": "BlockText",
-                    "url": "/components/block-text"
-                  },
-                  {
-                    "displayName": "HeadingText",
-                    "url": "/components/heading-text"
-                  },
-                  {
-                    "displayName": "Link",
-                    "url": "/components/link"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "displayName": "Data Visualization",
-            "children": [
-              {
-                "displayName": "AreaChart",
-                "url": "/components/area-chart"
-              },
-              {
-                "displayName": "BarChart",
-                "url": "/components/bar-chart"
-              },
-              {
-                "displayName": "BillboardChart",
-                "url": "/components/billboard-chart"
-              },
-              {
-                "displayName": "ChartGroup",
-                "url": "/components/chart-group"
-              },
-              {
-                "displayName": "FunnelChart",
-                "url": "/components/funnel-chart"
-              },
-              {
-                "displayName": "HeatmapChart",
-                "url": "/components/heatmap-chart"
-              },
-              {
-                "displayName": "HistogramChart",
-                "url": "/components/histogram-chart"
-              },
-              {
-                "displayName": "JsonChart",
-                "url": "/components/json-chart"
-              },
-              {
-                "displayName": "LineChart",
-                "url": "/components/line-chart"
-              },
-              {
-                "displayName": "PieChart",
-                "url": "/components/pie-chart"
-              },
-              {
-                "displayName": "ScatterChart",
-                "url": "/components/scatter-chart"
-              },
-              {
-                "displayName": "SparklineChart",
-                "url": "/components/sparkline-chart"
-              },
-              {
-                "displayName": "StackedBarChart",
-                "url": "/components/stacked-bar-chart"
-              },
-              {
-                "displayName": "TableChart",
-                "url": "/components/table-chart"
-              }
-            ]
-          },
-          {
-            "displayName": "Query and storage",
-            "children": [
-              {
-                "displayName": "AccountStorageMutation",
-                "url": "/components/account-storage-mutation"
-              },
-              {
-                "displayName": "AccountStorageQuery",
-                "url": "/components/account-storage-query"
-              },
-              {
-                "displayName": "AccountsQuery",
-                "url": "/components/accounts-query"
-              },
-              {
-                "displayName": "EntitiesByDomainTypeQuery",
-                "url": "/components/entities-by-domain-type-query"
-              },
-              {
-                "displayName": "EntitiesByGuidsQuery",
-                "url": "/components/entities-by-guids-query"
-              },
-              {
-                "displayName": "EntitiesByNameQuery",
-                "url": "/components/entities-by-name-query"
-              },
-              {
-                "displayName": "EntityByGuidQuery",
-                "url": "/components/entity-by-guid-query"
-              },
-              {
-                "displayName": "EntityCountQuery",
-                "url": "/components/entity-count-query"
-              },
-              {
-                "displayName": "EntitySearchQuery",
-                "url": "/components/entity-search-query"
-              },
-              {
-                "displayName": "EntityStorageMutation",
-                "url": "/components/entity-storage-mutation"
-              },
-              {
-                "displayName": "EntityStorageQuery",
-                "url": "/components/entity-storage-query"
-              },
-              {
-                "displayName": "NerdGraphMutation",
-                "url": "/components/nerd-graph-mutation"
-              },
-              {
-                "displayName": "NerdGraphQuery",
-                "url": "/components/nerd-graph-query"
-              },
-              {
-                "displayName": "NrqlQuery",
-                "url": "/components/nrql-query"
-              },
-              {
-                "displayName": "UserQuery",
-                "url": "/components/user-query"
-              },
-              {
-                "displayName": "UserStorageMutation",
-                "url": "/components/user-storage-mutation"
-              },
-              {
-                "displayName": "UserStorageQuery",
-                "url": "/components/user-storage-query"
-              }
-            ]
-          },
-          {
-            "displayName": "Platform APIs",
-            "children": [
-              {
-                "displayName": "NerdletStateContext",
-                "url": "/components/nerdlet-state-context"
-              },
-              {
-                "displayName": "PlatformStateContext",
-                "url": "/components/platform-state-context"
-              },
-              {
-                "displayName": "logger",
-                "url": "/apis/logger"
-              },
-              {
-                "displayName": "navigation",
-                "url": "/apis/navigation"
-              },
-              {
-                "displayName": "nerdlet",
-                "url": "/apis/nerdlet"
-              }
-            ]
+            "displayName": "AccountPicker",
+            "url": "/components/account-picker",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Button",
+            "url": "/components/button",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Checkbox",
+            "url": "/components/checkbox",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Dropdown",
+            "url": "/components/dropdown",
+            "group": "Controls"
+          },
+          {
+            "displayName": "DropdownItem",
+            "url": "/components/dropdown-item",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Radio",
+            "url": "/components/radio",
+            "group": "Controls"
+          },
+          {
+            "displayName": "RadioGroup",
+            "url": "/components/radio-group",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Select",
+            "url": "/components/select",
+            "group": "Controls"
+          },
+          {
+            "displayName": "SelectItem",
+            "url": "/components/select-item",
+            "group": "Controls"
+          },
+          {
+            "displayName": "TextField",
+            "url": "/components/text-field",
+            "group": "Controls"
+          },
+          {
+            "displayName": "Table",
+            "url": "/components/table",
+            "group": "Tables"
+          },
+          {
+            "displayName": "TableHeader",
+            "url": "/components/table-header",
+            "group": "Tables"
+          },
+          {
+            "displayName": "TableHeaderCell",
+            "url": "/components/table-header-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "TableRow",
+            "url": "/components/table-row",
+            "group": "Tables"
+          },
+          {
+            "displayName": "TableRowCell",
+            "url": "/components/table-row-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "EntityTitleTableRowCell",
+            "url": "/components/entity-title-table-row-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "MetricTableRowCell",
+            "url": "/components/metric-table-row-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "SparklineTableRowCell",
+            "url": "/components/sparkline-table-row-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "UserTableRowCell",
+            "url": "/components/user-table-row-cell",
+            "group": "Tables"
+          },
+          {
+            "displayName": "Icon",
+            "url": "/components/icon",
+            "group": "Feedback"
+          },
+          {
+            "displayName": "Spinner",
+            "url": "/components/spinner",
+            "group": "Feedback"
+          },
+          {
+            "displayName": "Toast",
+            "url": "/components/toast",
+            "group": "Feedback"
+          },
+          {
+            "displayName": "Modal",
+            "url": "/components/modal",
+            "group": "Overlays"
+          },
+          {
+            "displayName": "Tooltip",
+            "url": "/components/tooltip",
+            "group": "Overlays"
+          },
+          {
+            "displayName": "AutoSizer",
+            "url": "/components/auto-sizer",
+            "group": "Structure"
+          },
+          {
+            "displayName": "Card",
+            "url": "/components/card",
+            "group": "Structure"
+          },
+          {
+            "displayName": "CardBody",
+            "url": "/components/card-body",
+            "group": "Structure"
+          },
+          {
+            "displayName": "CardHeader",
+            "url": "/components/card-header",
+            "group": "Structure"
+          },
+          {
+            "displayName": "Grid",
+            "url": "/components/grid",
+            "group": "Structure"
+          },
+          {
+            "displayName": "GridItem",
+            "url": "/components/grid-item",
+            "group": "Structure"
+          },
+          {
+            "displayName": "List",
+            "url": "/components/list",
+            "group": "Structure"
+          },
+          {
+            "displayName": "ListItem",
+            "url": "/components/list-item",
+            "group": "Structure"
+          },
+          {
+            "displayName": "Spacing",
+            "url": "/components/spacing",
+            "group": "Structure"
+          },
+          {
+            "displayName": "Stack",
+            "url": "/components/stack",
+            "group": "Structure"
+          },
+          {
+            "displayName": "StackItem",
+            "url": "/components/stack-item",
+            "group": "Structure"
+          },
+          {
+            "displayName": "Tabs",
+            "url": "/components/tabs",
+            "group": "Structure"
+          },
+          {
+            "displayName": "TabsItem",
+            "url": "/components/tabs-item",
+            "group": "Structure"
+          },
+          {
+            "displayName": "BlockText",
+            "url": "/components/block-text",
+            "group": "Text"
+          },
+          {
+            "displayName": "HeadingText",
+            "url": "/components/heading-text",
+            "group": "Text"
+          },
+          {
+            "displayName": "Link",
+            "url": "/components/link",
+            "group": "Text"
+          },
+          {
+            "displayName": "AreaChart",
+            "url": "/components/area-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "BarChart",
+            "url": "/components/bar-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "BillboardChart",
+            "url": "/components/billboard-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "ChartGroup",
+            "url": "/components/chart-group",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "FunnelChart",
+            "url": "/components/funnel-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "HeatmapChart",
+            "url": "/components/heatmap-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "HistogramChart",
+            "url": "/components/histogram-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "JsonChart",
+            "url": "/components/json-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "LineChart",
+            "url": "/components/line-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "PieChart",
+            "url": "/components/pie-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "ScatterChart",
+            "url": "/components/scatter-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "SparklineChart",
+            "url": "/components/sparkline-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "StackedBarChart",
+            "url": "/components/stacked-bar-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "TableChart",
+            "url": "/components/table-chart",
+            "group": "Data visualization"
+          },
+          {
+            "displayName": "AccountStorageMutation",
+            "url": "/components/account-storage-mutation",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "AccountStorageQuery",
+            "url": "/components/account-storage-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "AccountsQuery",
+            "url": "/components/accounts-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntitiesByDomainTypeQuery",
+            "url": "/components/entities-by-domain-type-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntitiesByGuidsQuery",
+            "url": "/components/entities-by-guids-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntitiesByNameQuery",
+            "url": "/components/entities-by-name-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntityByGuidQuery",
+            "url": "/components/entity-by-guid-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntityCountQuery",
+            "url": "/components/entity-count-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntitySearchQuery",
+            "url": "/components/entity-search-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntityStorageMutation",
+            "url": "/components/entity-storage-mutation",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "EntityStorageQuery",
+            "url": "/components/entity-storage-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "NerdGraphMutation",
+            "url": "/components/nerd-graph-mutation",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "NerdGraphQuery",
+            "url": "/components/nerd-graph-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "NrqlQuery",
+            "url": "/components/nrql-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "UserQuery",
+            "url": "/components/user-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "UserStorageMutation",
+            "url": "/components/user-storage-mutation",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "UserStorageQuery",
+            "url": "/components/user-storage-query",
+            "group": "Query and storage"
+          },
+          {
+            "displayName": "NerdletStateContext",
+            "url": "/components/nerdlet-state-context",
+            "group": "Platform APIs"
+          },
+          {
+            "displayName": "PlatformStateContext",
+            "url": "/components/platform-state-context",
+            "group": "Platform APIs"
+          },
+          {
+            "displayName": "logger",
+            "url": "/apis/logger",
+            "group": "Platform APIs"
+          },
+          {
+            "displayName": "navigation",
+            "url": "/apis/navigation",
+            "group": "Platform APIs"
+          },
+          {
+            "displayName": "nerdlet",
+            "url": "/apis/nerdlet",
+            "group": "Platform APIs"
           }
         ]
       }