@base-ui-components/react/navigation-menu/root/NavigationMenuRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { BaseUIComponentProps } from "../../utils/types.js";
import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
import { REASONS } from "../../utils/reasons.js";
/**
 * Groups all parts of the navigation menu.
 * Renders a `<nav>` element at the root, or `<div>` element when nested.
 *
 * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
 */
export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<NavigationMenuRootProps & React.RefAttributes<HTMLElement>>;
export interface NavigationMenuRootState {
  /**
   * If `true`, the popup is open.
   */
  open: boolean;
  /**
   * Whether the navigation menu is nested.
   */
  nested: boolean;
}
export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRoot.State> {
  /**
   * A ref to imperative actions.
   */
  actionsRef?: React.RefObject<NavigationMenuRoot.Actions>;
  /**
   * Event handler called after any animations complete when the navigation menu is closed.
   */
  onOpenChangeComplete?: (open: boolean) => void;
  /**
   * The controlled value of the navigation menu item that should be currently open.
   * When non-nullish, the menu will be open. When nullish, the menu will be closed.
   *
   * To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
   * @default null
   */
  value?: any;
  /**
   * The uncontrolled value of the item that should be initially selected.
   *
   * To render a controlled navigation menu, use the `value` prop instead.
   * @default null
   */
  defaultValue?: any;
  /**
   * Callback fired when the value changes.
   */
  onValueChange?: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
  /**
   * How long to wait before opening the navigation menu. Specified in milliseconds.
   * @default 50
   */
  delay?: number;
  /**
   * How long to wait before closing the navigation menu. Specified in milliseconds.
   * @default 50
   */
  closeDelay?: number;
  /**
   * The orientation of the navigation menu.
   * @default 'horizontal'
   */
  orientation?: 'horizontal' | 'vertical';
}
export interface NavigationMenuRootActions {
  unmount: () => void;
}
export type NavigationMenuRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.triggerHover | typeof REASONS.outsidePress | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.escapeKey | typeof REASONS.linkPress | typeof REASONS.none;
export type NavigationMenuRootChangeEventDetails = BaseUIChangeEventDetails<NavigationMenuRoot.ChangeEventReason>;
export declare namespace NavigationMenuRoot {
  type State = NavigationMenuRootState;
  type Props = NavigationMenuRootProps;
  type Actions = NavigationMenuRootActions;
  type ChangeEventReason = NavigationMenuRootChangeEventReason;
  type ChangeEventDetails = NavigationMenuRootChangeEventDetails;
}