MenusReact

import { NavigationMenu } from '@hamur/react/navigation-menu'

const guides = [
  { href: '#quick-start', title: 'Quick start', text: 'Install and build your first part.' },
  { href: '#accessibility', title: 'Accessibility', text: 'How the parts stay accessible.' },
]
const handbook = [
  { href: '#styling', title: 'Styling', text: 'Plain CSS, Tailwind or CSS modules.' },
  { href: '#animation', title: 'Animation', text: 'Transitions on the data attributes.' },
  { href: '#composition', title: 'Composition', text: 'Swap in your own elements.' },
]

export default function NavigationMenuExample() {
  return (
    <NavigationMenu.Root className="nav">
      <NavigationMenu.List className="nav-list">
        {[
          { value: 'guides', label: 'Guides', links: guides },
          { value: 'handbook', label: 'Handbook', links: handbook },
        ].map((item) => (
          <NavigationMenu.Item key={item.value} value={item.value}>
            <NavigationMenu.Trigger className="nav-trigger">
              {item.label}
              <NavigationMenu.Icon className="nav-icon" />
            </NavigationMenu.Trigger>
            <NavigationMenu.Content className="nav-content">
              {item.links.map((link) => (
                <NavigationMenu.Link
                  key={link.href}
                  className="nav-link"
                  href={link.href}
                >
                  <span className="nav-link-title">{link.title}</span>
                  <span className="muted">{link.text}</span>
                </NavigationMenu.Link>
              ))}
            </NavigationMenu.Content>
          </NavigationMenu.Item>
        ))}
        <NavigationMenu.Item>
          <NavigationMenu.Link className="nav-trigger" href="#changelog">
            Changelog
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner
          className="nav-positioner"
          sideOffset={8}
          collisionPadding={16}
        >
          <NavigationMenu.Popup className="nav-popup">
            <NavigationMenu.Arrow className="arrow" />
            <NavigationMenu.Viewport className="nav-viewport" />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  )
}

599Tests passing in React · 0 failing

44.5 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 22 upstream authors10 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>
        <NavigationMenu.Icon />
      </NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
  <NavigationMenu.Portal>
    <NavigationMenu.Positioner>
      <NavigationMenu.Popup>
        <NavigationMenu.Arrow />
        <NavigationMenu.Viewport />
      </NavigationMenu.Popup>
    </NavigationMenu.Positioner>
  </NavigationMenu.Portal>
</NavigationMenu.Root>

// Not in this example: NavigationMenu.Backdrop

Examples

A Root inside a Content part makes a second level that opens to the side.

NavigationMenuNested.tsx

import { NavigationMenu } from '@hamur/react/navigation-menu'

const overviewLinks = [
  {
    href: '#quick-start',
    title: 'Quick Start',
    description: 'Install and assemble your first component.',
  },
  {
    href: '#accessibility',
    title: 'Accessibility',
    description: 'Learn how we build accessible components.',
  },
  {
    href: '#releases',
    title: 'Releases',
    description: 'See what’s new in the latest Base UI versions.',
  },
]

const handbookLinks = [
  {
    href: '#styling',
    title: 'Styling',
    description:
      'Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',
  },
  {
    href: '#animation',
    title: 'Animation',
    description:
      'Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',
  },
  {
    href: '#composition',
    title: 'Composition',
    description:
      'Base UI components can be replaced and composed with your own existing components.',
  },
]

export default function NavigationMenuNestedExample() {
  return (
    <NavigationMenu.Root className="nav">
      <NavigationMenu.List className="nav-list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="nav-trigger">
            Overview
            <NavigationMenu.Icon className="nav-icon" />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul className="nav-card-list wide">
              {overviewLinks.map((item) => (
                <li key={item.href}>
                  <NavigationMenu.Link className="nav-card" href={item.href}>
                    <h3 className="nav-card-title">{item.title}</h3>
                    <p className="nav-card-text">{item.description}</p>
                  </NavigationMenu.Link>
                </li>
              ))}
              <li>
                <NavigationMenu.Root orientation="vertical">
                  <NavigationMenu.List className="nav-inline-list">
                    <NavigationMenu.Item>
                      <NavigationMenu.Trigger className="nav-card">
                        <span className="nav-card-title">Handbook</span>
                        <span className="nav-card-text">How to use Base UI effectively.</span>
                        <NavigationMenu.Icon className="nav-icon" />
                      </NavigationMenu.Trigger>
                      <NavigationMenu.Content>
                        <ul className="nav-card-list narrow">
                          {handbookLinks.map((item) => (
                            <li key={item.href}>
                              <NavigationMenu.Link className="nav-card" href={item.href}>
                                <h3 className="nav-card-title">{item.title}</h3>
                                <p className="nav-card-text">{item.description}</p>
                              </NavigationMenu.Link>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenu.Content>
                    </NavigationMenu.Item>
                  </NavigationMenu.List>
                  <NavigationMenu.Portal>
                    <NavigationMenu.Positioner
                      className="nav-positioner"
                      sideOffset={8}
                      alignOffset={-8}
                      align="end"
                      side="right"
                    >
                      <NavigationMenu.Popup className="nav-popup">
                        <NavigationMenu.Viewport className="nav-viewport" />
                      </NavigationMenu.Popup>
                    </NavigationMenu.Positioner>
                  </NavigationMenu.Portal>
                </NavigationMenu.Root>
              </li>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner
          className="nav-positioner"
          sideOffset={10}
          collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
        >
          <NavigationMenu.Popup className="nav-popup">
            <NavigationMenu.Arrow className="arrow" />
            <NavigationMenu.Viewport className="nav-viewport" />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  )
}

A second level that stays in the same panel: List and Viewport with a defaultValue, no Portal.

NavigationMenuNestedInline.tsx

import { NavigationMenu } from '@hamur/react/navigation-menu'

const audienceMenus = [
  {
    value: 'developers',
    label: 'Developers',
    hint: 'Go from idea to UI faster.',
    title: 'Build product UI without giving up control',
    description:
      'Start with accessible parts and shape them to your app instead of working around a preset design system.',
    links: [
      {
        href: '#quick-start',
        title: 'Quick start',
        description: 'Install Base UI and get your first interactive primitive on screen fast.',
      },
      {
        href: '#composition',
        title: 'Composition',
        description: 'Wrap and combine parts to match your product structure without hacks.',
      },
    ],
  },
  {
    value: 'systems',
    label: 'Design Systems',
    hint: 'Keep patterns aligned across teams.',
    title: 'Turn shared standards into working components',
    description:
      'Connect tokens, states, and accessibility rules once, then give every product team the same solid starting point.',
    links: [
      {
        href: '#styling',
        title: 'Styling',
        description: 'Map tokens and component states to your own CSS or utility setup.',
      },
      {
        href: '#accessibility',
        title: 'Accessibility',
        description: 'Review keyboard support and semantic defaults before anything ships.',
      },
      {
        href: '#tooltip',
        title: 'Tooltip',
        description: 'Set one clear pattern for lightweight help, hints, and field guidance.',
      },
      {
        href: '#popover',
        title: 'Popover',
        description: 'Handle richer anchored panels like menus, inspectors, and onboarding.',
      },
    ],
  },
  {
    value: 'managers',
    label: 'Engineering Leads',
    hint: 'Roll out shared UI without drag.',
    title: 'Give squads clear defaults and room to move',
    description:
      'Use the docs to align on quality bars, upgrades, and extension points while still leaving teams space to customize.',
    links: [
      {
        href: '#releases',
        title: 'Releases',
        description: 'Track version changes and migration notes before upgrades surprise teams.',
      },
      {
        href: '#typescript',
        title: 'TypeScript',
        description: 'See how the primitives type custom wrappers and shared abstractions.',
      },
      {
        href: '#forms',
        title: 'Forms',
        description: 'Standardize validation and field patterns teams reach for constantly.',
      },
    ],
  },
  {
    value: 'startups',
    label: 'Startups',
    hint: 'Ship polished basics while things change.',
    title: 'Get sturdy UI foundations in place early',
    description:
      'Cover the hard interaction details now so your team can spend more time on the product ideas that actually differentiate you.',
    links: [
      {
        href: '#quick-start',
        title: 'Quick start',
        description: 'Get the package installed and your first component working in minutes.',
      },
      {
        href: '#menu',
        title: 'Menu',
        description: 'Add action menus with keyboard support and focus handling already done.',
      },
      {
        href: '#dialog',
        title: 'Dialog',
        description: 'Launch settings or upgrade flows without rebuilding focus management.',
      },
    ],
  },
]

const guidesPanel = {
  title: 'Where teams usually start',
  description:
    'These are the docs people reach for first when they are turning a prototype into shared UI.',
}

const guideLinks = [
  {
    href: '#accessibility',
    title: 'Accessibility handbook',
    description: 'Take a practical pass over focus order, semantics, and keyboard support.',
  },
  {
    href: '#composition',
    title: 'Composition handbook',
    description: 'Learn when to wrap parts, share behavior, and expose flexible APIs.',
  },
  {
    href: '#styling',
    title: 'Styling handbook',
    description: 'Apply tokens and state styles without fighting the underlying markup.',
  },
]

export default function NavigationMenuNestedInlineExample() {
  return (
    <NavigationMenu.Root className="nav">
      <NavigationMenu.List className="nav-list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="nav-trigger">
            Product
            <NavigationMenu.Icon className="nav-icon" />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Root orientation="vertical" defaultValue="developers">
              <div className="nav-inline">
                <NavigationMenu.List className="nav-inline-list">
                  {audienceMenus.map((menu) => (
                    <NavigationMenu.Item key={menu.value} value={menu.value}>
                      <NavigationMenu.Trigger className="nav-card">
                        <span className="nav-card-title">{menu.label}</span>
                        <span className="nav-card-text">{menu.hint}</span>
                      </NavigationMenu.Trigger>
                      <NavigationMenu.Content className="nav-inline-content">
                        <div>
                          <h4 className="nav-card-title">{menu.title}</h4>
                          <p className="nav-card-text">{menu.description}</p>
                        </div>
                        <ul className="nav-card-list">
                          {menu.links.map((link) => (
                            <li key={link.href}>
                              <NavigationMenu.Link className="nav-card" href={link.href}>
                                <h5 className="nav-card-title">{link.title}</h5>
                                <p className="nav-card-text">{link.description}</p>
                              </NavigationMenu.Link>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenu.Content>
                    </NavigationMenu.Item>
                  ))}
                </NavigationMenu.List>
                <NavigationMenu.Viewport className="nav-inline-viewport" />
              </div>
            </NavigationMenu.Root>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="nav-trigger">
            Learn
            <NavigationMenu.Icon className="nav-icon" />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <div className="nav-inline-content">
              <div>
                <h4 className="nav-card-title">{guidesPanel.title}</h4>
                <p className="nav-card-text">{guidesPanel.description}</p>
              </div>
              <ul className="nav-card-list">
                {guideLinks.map((link) => (
                  <li key={link.href}>
                    <NavigationMenu.Link className="nav-card" href={link.href}>
                      <h5 className="nav-card-title">{link.title}</h5>
                      <p className="nav-card-text">{link.description}</p>
                    </NavigationMenu.Link>
                  </li>
                ))}
              </ul>
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link className="nav-trigger" href="#releases">
            Releases
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link className="nav-trigger" href="https://github.com/mui/base-ui">
            GitHub
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner
          className="nav-positioner"
          sideOffset={10}
          collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
          collisionAvoidance={{ side: 'none' }}
        >
          <NavigationMenu.Popup className="nav-popup">
            <NavigationMenu.Arrow className="arrow" />
            <NavigationMenu.Viewport className="nav-viewport" />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  )
}

API reference

28 props across 13 parts, in React syntax. className, style, render are listed once, under Shared props.

Arrow`NavigationMenu.Arrow`

Displays an element pointing toward the navigation menu's current anchor. Renders a <div>.

Arrow data attributes
Data attribute	Description
`data-open`	Present when the popup is open.
`data-closed`	Present when the popup is closed.
`data-side`	Indicates which side the popup is positioned relative to the trigger.
`data-align`	Indicates how the popup is aligned relative to specified side.
`data-uncentered`	Present when the popup arrow is uncentered.

Backdrop`NavigationMenu.Backdrop`

A backdrop for the navigation menu popup. Renders a <div>.

Backdrop data attributes
Data attribute	Description
`data-open`	Present when the popup is open.
`data-closed`	Present when the popup is closed.
`data-starting-style`	Present when the popup begins animating in.
`data-ending-style`	Present when the popup is animating out.

Content`NavigationMenu.Content`

A container for the content of the navigation menu item that is moved into the popup when the item is active. Renders a <div>.

Content props
Prop	Type	Default
`keepMounted`Whether to keep the content mounted in the DOM while the popup is closed.	`boolean`	`false`

Content data attributes
Data attribute	Description
`data-open`	Present when the popup is open.
`data-closed`	Present when the popup is closed.
`data-starting-style`	Present when the content begins animating in.
`data-ending-style`	Present when the content is animating out.
`data-activation-direction`	Which direction another trigger was activated from.

Icon`NavigationMenu.Icon`

An icon that indicates that the trigger button opens a menu.

Icon data attributes
Data attribute	Description
`data-popup-open`	Present when the navigation menu is open and the item is active.

Item`NavigationMenu.Item`

An individual navigation menu item. Renders a <li>.

Item props
Prop	Type	Default
`value`A unique value that identifies this navigation menu item.	`any`	`—`

Link`NavigationMenu.Link`

A link in the navigation menu that can be used to navigate to a different page or section. Renders an <a>.

Link props
Prop	Type	Default
`closeOnClick`Whether to close the navigation menu when the link is clicked.	`boolean`	`false`
`active`Whether the link is the currently active page.	`boolean`	`false`

Link data attributes
Data attribute	Description
`data-active`	Present when the link is the currently active page.

List`NavigationMenu.List`

Contains a list of navigation menu items. Renders an <ul>.

Popup`NavigationMenu.Popup`

A container for the navigation menu contents. Renders a <nav>.

Popup data attributes
Data attribute	Description
`data-open`	Present when the popup is open.
`data-closed`	Present when the popup is closed.
`data-starting-style`	Present when the popup begins animating in.
`data-ending-style`	Present when the popup is animating out.
`data-anchor-hidden`	Present when the anchor is hidden.
`data-side`	Indicates which side the popup is positioned relative to the trigger.
`data-align`	Indicates how the popup is aligned relative to the specified side.

Popup CSS variables
CSS variable	Description
`--popup-width`	The fixed width of the popup element.
`--popup-height`	The fixed height of the popup element.

Portal`NavigationMenu.Portal`

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div>.

Portal props
Prop	Type	Default
`container`A parent element to render the portal element into.	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	`—`
`keepMounted`Whether to keep the portal mounted in the DOM while the popup is hidden.	`boolean`	`false`

Positioner`NavigationMenu.Positioner`

Positions the navigation menu against the currently active trigger. Renders a <div>.

Positioner props
Prop	Type	Default
`disableAnchorTracking`Whether to disable the popup from tracking any layout shift of its positioning anchor.	`boolean`	`false`
`align`How to align the popup relative to the specified side.	`Align`	`'center'`
`alignOffset`Additional offset along the alignment axis in pixels.	`number \| OffsetFunction`	`0`
`side`Which side of the anchor element to align the popup against.	`Side`	`'bottom'`
`sideOffset`Distance between the anchor and the popup in pixels.	`number \| OffsetFunction`	`0`
`arrowPadding`Minimum distance to maintain between the arrow and the edges of the popup.	`number`	`5`
`anchor`An element to position the popup against.	`Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null`	`—`
`collisionAvoidance`Determines how to handle collisions when positioning the popup.	`CollisionAvoidance`	`—`
`collisionBoundary`An element or a rectangle that delimits the area that the popup is confined to.	`Boundary`	`'clipping-ancestors'`
`collisionPadding`Additional space to maintain from the edge of the collision boundary.	`Padding`	`5`
`sticky`Whether to maintain the popup in the viewport after	`boolean`	`false`
`positionMethod`Determines which CSS `position` property to use.	`"absolute" \| "fixed"`	`'absolute'`

Positioner data attributes
Data attribute	Description
`data-open`	Present when the popup is open.
`data-closed`	Present when the popup is closed.
`data-anchor-hidden`	Present when the anchor is hidden.
`data-side`	Indicates which side the popup is positioned relative to the trigger.
`data-align`	Indicates how the popup is aligned relative to the specified side.
`data-instant`	Present if animations should be instant.

Positioner CSS variables
CSS variable	Description
`--available-width`	The available width between the trigger and the edge of the viewport.
`--available-height`	The available height between the trigger and the edge of the viewport.
`--anchor-width`	The anchor's width.
`--anchor-height`	The anchor's height.
`--transform-origin`	The coordinates that this element is anchored to. Used for animations and transitions.
`--positioner-width`	The fixed width of the positioner element.
`--positioner-height`	The fixed height of the positioner element.

Root`NavigationMenu.Root`

Groups all parts of the navigation menu. at the root, or <div> element when nested. Renders a <nav>.

Root props
Prop	Type	Default
`defaultValue`The uncontrolled value of the item that should be initially selected.	`TValue \| null`	`null`
`value`The controlled value of the navigation menu item that should be currently open.	`TValue \| null`	`null`
`onValueChange`Callback fired when the value changes.	`((value: TValue \| null, eventDetails: NavigationMenuRootChangeEventDetails) => void)`	`—`
`actionsRef`A ref to imperative actions.	`React.RefObject<NavigationMenuRootActions \| null>`	`—`
`onOpenChangeComplete`Event handler called after any animations complete when the navigation menu is closed.	`((open: boolean) => void)`	`—`
`delay`How long to wait before opening the navigation popup.	`number`	`50`
`closeDelay`How long to wait before closing the navigation popup.	`number`	`50`
`orientation`The orientation of the navigation menu.	`"horizontal" \| "vertical"`	`'horizontal'`

Trigger`NavigationMenu.Trigger`

Opens the navigation menu popup when hovered or clicked, revealing the associated content. Renders a <button>.

Trigger props
Prop	Type	Default
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

Trigger data attributes
Data attribute	Description
`data-popup-open`	Present when the corresponding navigation menu is open.
`data-pressed`	Present when the trigger is pressed.
`data-disabled`	Present when the trigger is disabled.

Viewport`NavigationMenu.Viewport`

The clipping viewport of the navigation menu's current content. Renders a <div>.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`ArrowDownEnterSpace`	Opens the item's content and keeps focus on the trigger	Trigger
`ArrowLeftArrowRight`	Moves between the triggers and links of the list	List
`ArrowDownArrowUp`	Moves between the triggers of a nested menu	List
`Escape`	Closes the content and returns focus to its trigger	Trigger

Accessibility

What the parts set
Part	Sets	So that
Root	renders a `<nav>`	the menu is a navigation landmark
List	renders a `<ul>`, each Item an `<li>`	a screen reader counts the entries
Trigger	`aria-expanded`, `aria-controls` to the popup while its content is open	a screen reader says whether the panel is open and where it is
Link	`aria-current="page"` while `active`	the link to the current page is announced as such
Icon	`aria-hidden="true"`	the decorative chevron is not read
Arrow	`aria-hidden="true"`	the decorative arrow is not read
Backdrop	`role="presentation"`	the overlay is not read

Focus order

Each Trigger and top-level Link is in the tab order; arrow keys also move between them.
Opening with a key keeps focus on Trigger; Tab then moves into the open content.
Escape closes the content and returns focus to its Trigger.

Navigation Menu

Installation

Anatomy

Examples

Nested

Nested Inline

API reference

Arrow`NavigationMenu.Arrow`

Backdrop`NavigationMenu.Backdrop`

Content`NavigationMenu.Content`

Icon`NavigationMenu.Icon`

Item`NavigationMenu.Item`

Link`NavigationMenu.Link`

List`NavigationMenu.List`

Portal`NavigationMenu.Portal`

Positioner`NavigationMenu.Positioner`

Root`NavigationMenu.Root`

Trigger`NavigationMenu.Trigger`

Viewport`NavigationMenu.Viewport`

Shared props

Keyboard and accessibility

Keyboard

Accessibility

Focus order

Installation

Anatomy

Examples

Nested

Nested Inline

API reference

ArrowNavigationMenu.Arrow

BackdropNavigationMenu.Backdrop

ContentNavigationMenu.Content

IconNavigationMenu.Icon

ItemNavigationMenu.Item

LinkNavigationMenu.Link

ListNavigationMenu.List

PopupNavigationMenu.Popup

PortalNavigationMenu.Portal

PositionerNavigationMenu.Positioner

RootNavigationMenu.Root

TriggerNavigationMenu.Trigger

ViewportNavigationMenu.Viewport

Shared props

Keyboard and accessibility

Keyboard

Accessibility

Focus order

Arrow`NavigationMenu.Arrow`

Backdrop`NavigationMenu.Backdrop`

Content`NavigationMenu.Content`

Icon`NavigationMenu.Icon`

Item`NavigationMenu.Item`

Link`NavigationMenu.Link`

List`NavigationMenu.List`

Popup`NavigationMenu.Popup`

Portal`NavigationMenu.Portal`

Positioner`NavigationMenu.Positioner`

Root`NavigationMenu.Root`

Trigger`NavigationMenu.Trigger`

Viewport`NavigationMenu.Viewport`