@amsterdam/design-system-react/dist/Menu/Menu.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { MenuLink } from './MenuLink';
export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, inWideWindow, ...restProps }, ref) => {
    // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
    // In a wide window, we render a `nav` element and the related accessibility features.
    const Tag = inWideWindow ? 'nav' : 'div';
    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
});
MenuRoot.displayName = 'Menu';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
 */
export const Menu = Object.assign(MenuRoot, { Link: MenuLink });