NavigationMenu: Add support for nested links

components/navigation-menu/assets/NavigationMenu.scss

@@ -19,22 +19,59 @@
     font-size: inherit;
     line-height: inherit;
 
+    &__subitems {
+      @extend .govuk-list;
+      border-color: inherit;
+      border-style: inherit;
+      border-width: 0;
+      color: inherit;
+      font-size: inherit; /* GDS are removing support for 14px */
+      line-height: inherit;
+      margin-bottom: 0;
+      /* font-size: 0.875rem; */
+      /* line-height: 1.4285714286; */
+      /* @include govuk-font(14); */
+      @include govuk-responsive-margin(2, "top");
+      @include govuk-responsive-padding(4, "left");
+
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
     &__item {
       border-color: inherit;
       border-style: inherit;
       border-width: 0;
       color: inherit;
-      @include govuk-responsive-padding(1, "top");
       @include govuk-responsive-padding(0, "left");
       @include govuk-responsive-padding(1, "bottom");
       @include govuk-responsive-padding(0, "right");
 
       &--active {
-        border-left-width: $border-width;
         font-weight: bold;
+      }
+
+      &::before {
+        content: '— ';
+        color: govuk-colour('dark-grey');
+        font-weight: normal;
+        margin-left: -18px;
+      }
+    }
+
+    > .not-govuk-navigation-menu__list__item {
+      @include govuk-responsive-padding(1, "top");
+
+      &--active {
+        border-left-width: $border-width;
         margin-left: -14px;
         padding-left: 10px;
       }
+
+      &::before {
+        content: none;
+      }
     }
 
     &__link {

components/navigation-menu/package.json

@@ -44,7 +44,6 @@
   },
   "devDependencies": {
     "@mdx-js/react": "1.6.22",
-    "@not-govuk/anchor": "workspace:^0.15.6",
     "@not-govuk/component-test-helpers": "workspace:^0.15.6",
     "@not-govuk/tag": "workspace:^0.15.6",
     "@types/react": "18.3.18",

components/navigation-menu/spec/NavigationMenu.stories.mdx

@@ -49,6 +49,29 @@ A standard Navigation menu.
 </Preview>
 
 
+### Sub-items
+
+You can provide a hierarchy of links.
+
+<Preview>
+  <Story name="Sub-items">
+    <NavigationMenu items={[
+      { href: '/', text: 'Inactive 1' },
+      { href: '/components', text: 'Active', items: [
+        { href: '/components?name=Back%20link', text: 'Inactive 1' },
+        { href: '/components?name=Navigation%20menu', text: 'Active' },
+        { href: '/components?name=Button', text: 'Inactive 2' }
+      ] },
+      { href: '/#main-content', text: 'Inactive 2', items: [
+        { href: '/?id=1', text: 'One' },
+        { href: '/?id=2', text: 'Two' },
+        { href: '/?id=3', text: 'Three' }
+      ] }
+    ]} />
+  </Story>
+</Preview>
+
+
 ### Horizontal
 
 <p><Tag text="Deprecated" /></p>

components/navigation-menu/src/NavigationMenu.tsx

@@ -1,18 +1,14 @@
 import { FC, HTMLAttributes, createElement as h } from 'react';
-import { AnchorProps } from '@not-govuk/anchor';
-import { AnchorList } from '@not-govuk/anchor-list';
+import { AnchorList, Item } from '@not-govuk/anchor-list';
 import { StandardProps, classBuilder } from '@not-govuk/component-helpers';
 
 import '../assets/NavigationMenu.scss';
 
-export type Anchor = AnchorProps & {
-  /** Text of the link */
-  text: string
-};
+export type Anchor = Item
 
 export type NavigationMenuProps = StandardProps & HTMLAttributes<HTMLElement> & {
   /** List of links to choose from */
-  items: Anchor[]
+  items: Item[]
 };
 
 export const NavigationMenu: FC<NavigationMenuProps> = ({
@@ -32,3 +28,4 @@ export const NavigationMenu: FC<NavigationMenuProps> = ({
 };
 
 export default NavigationMenu;
+export type { Item } from '@not-govuk/anchor-list';