feat(ui): build Nav component

packages/ui/src/components/Nav/index.tsx

@@ -0,0 +1,31 @@
+import { Heading } from '@utrecht/component-library-react';
+import type { HeadingProps } from '@utrecht/component-library-react';
+import { DetailedHTMLProps, ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef, useId } from 'react';
+
+export interface NavProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+  label?: string;
+  headingLevel?: number;
+  headingRestProps?: HeadingProps;
+}
+
+export const Nav = forwardRef(
+  (
+    { children, label, headingLevel = 3, className, headingRestProps, ...restProps }: PropsWithChildren<NavProps>,
+    ref: ForwardedRef<HTMLElement>,
+  ) => {
+    const headingId = label ? useId() : undefined;
+
+    return (
+      <nav ref={ref} className={className} aria-labelledby={headingId} {...restProps}>
+        {label && (
+          <Heading id={headingId} level={headingLevel} aria-hidden="true" hidden {...headingRestProps}>
+            {label}
+          </Heading>
+        )}
+        {children}
+      </nav>
+    );
+  },
+);
+Nav.displayName = 'SocialMediaNav';

packages/ui/src/components/index.tsx

@@ -6,6 +6,7 @@ export { Navigation } from './Navigation';
 export { NavigationList } from './Navigation/NavigationList';
 export { PreviewAlert } from './PreviewAlert';
 export { ProductListItem, ProductListPaginationInfo, ProductsList } from './ProductList';
+export { Nav } from './Nav';
 export { ScrollToTopButton } from './ScrollToTopButton';
 export { SearchIndexContent } from './SearchIndexContent';
 export * from './AdvancedLink';