fixes #343 breadcrumbs example

apps/site/src/content/design-system/components/alert/design/user-experience/content.mdoc

@@ -5,7 +5,7 @@ Use alerts to draw attention to specific messages in a particular context. They
 #### Alert types
 
 **Success:** The green message colour and tick icon is used to communicate successful completion of a process or task. It is commonly used with confirmation messaging, the intention is to provide confidence that a process has been completed successfully and the user can now move on.
-
+  
 **Information:** The blue message colour and info icon is used to convey useful information. It should be used for things like instructions, feedback about information that has been provided, or high-level information about a system or process. This style provides flexibility to use a different icon. To remain accessible, do not use any of the default icons that are used for the other alert types.
 
 **Warning:** The orange message colour and warning icon is for use in scenarios where the user needs to understand something before proceeding. It is saved for necessary messaging but not for error messages. For example, ‘this process will time-out in 3 min’ - use it as a ‘Watch out’, rather than a stop.

apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc

@@ -1,21 +1,47 @@
 ```jsx
 // Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+<div className="flex flex-col gap-5">
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb>
+    <NextLink href="#test" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isDisabled tag="a">
+        Disabled item
+      </Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Last item
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```

apps/site/src/content/design-system/components/breadcrumb/code.mdoc

@@ -1,23 +1,45 @@
-## Breadcrumb
+### Default breadcrumb
 
 ```jsx
 // Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+<div>
+  <Breadcrumb>
+    <NextLink href="#test" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isDisabled tag="a">
+        Disabled item
+      </Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Last item
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
+```
+
+### As router
+
+```jsx
+<div>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Credit cards
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```