@als-tp/als-react-ts-ui/dist/components/ALSNavigationMenu/index.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import type { ALSNavigationMenuRootProps, ALSNavigationMenuListProps, ALSNavigationMenuItemProps, ALSNavigationMenuTriggerProps, ALSNavigationMenuIconProps, ALSNavigationMenuContentProps, ALSNavigationMenuLinkProps, ALSNavigationMenuPortalProps, ALSNavigationMenuPositionerProps, ALSNavigationMenuPopupProps, ALSNavigationMenuViewportProps, ALSNavigationMenuArrowProps, ALSNavigationMenuBackdropProps, ALSNavigationMenuLinkCardProps, ALSNavigationMenuOrientation, ALSNavigationMenuSize, ALSNavigationMenuVariant } from "./ALSNavigationMenu";
/**
 * ALSNavigationMenu - A compound component for building accessible navigation menus
 *
 * @example
 * ```tsx
 * <ALSNavigationMenu.Root>
 *   <ALSNavigationMenu.List>
 *     <ALSNavigationMenu.Item>
 *       <ALSNavigationMenu.Trigger>
 *         Products
 *         <ALSNavigationMenu.Icon />
 *       </ALSNavigationMenu.Trigger>
 *       <ALSNavigationMenu.Content>
 *         <ALSNavigationMenu.LinkCard
 *           href="/products/overview"
 *           title="Overview"
 *           description="Learn about our products"
 *         />
 *       </ALSNavigationMenu.Content>
 *     </ALSNavigationMenu.Item>
 *   </ALSNavigationMenu.List>
 *
 *   <ALSNavigationMenu.Portal>
 *     <ALSNavigationMenu.Positioner>
 *       <ALSNavigationMenu.Popup>
 *         <ALSNavigationMenu.Arrow />
 *         <ALSNavigationMenu.Viewport />
 *       </ALSNavigationMenu.Popup>
 *     </ALSNavigationMenu.Positioner>
 *   </ALSNavigationMenu.Portal>
 * </ALSNavigationMenu.Root>
 * ```
 */
export declare const ALSNavigationMenu: {
    /** Groups all parts of the navigation menu */
    Root: import("react").ForwardRefExoticComponent<ALSNavigationMenuRootProps & import("react").RefAttributes<HTMLElement>>;
    /** Contains a list of navigation menu items */
    List: import("react").ForwardRefExoticComponent<ALSNavigationMenuListProps & import("react").RefAttributes<HTMLDivElement>>;
    /** An individual navigation menu item */
    Item: import("react").ForwardRefExoticComponent<ALSNavigationMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
    /** Opens the navigation menu popup when hovered or clicked */
    Trigger: import("react").ForwardRefExoticComponent<ALSNavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
    /** An icon that indicates the trigger opens a menu */
    Icon: import("react").ForwardRefExoticComponent<ALSNavigationMenuIconProps & import("react").RefAttributes<HTMLDivElement>>;
    /** A container for the content of the navigation menu item */
    Content: import("react").ForwardRefExoticComponent<ALSNavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
    /** A link in the navigation menu */
    Link: import("react").ForwardRefExoticComponent<ALSNavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
    /** A portal element that moves the popup to a different part of the DOM */
    Portal: import("react").FC<ALSNavigationMenuPortalProps>;
    /** Positions the navigation menu against the currently active trigger */
    Positioner: import("react").ForwardRefExoticComponent<ALSNavigationMenuPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
    /** A container for the navigation menu contents */
    Popup: import("react").ForwardRefExoticComponent<ALSNavigationMenuPopupProps & import("react").RefAttributes<HTMLElement>>;
    /** The clipping viewport of the navigation menu's current content */
    Viewport: import("react").ForwardRefExoticComponent<ALSNavigationMenuViewportProps & import("react").RefAttributes<HTMLDivElement>>;
    /** Displays an element pointing toward the navigation menu's current anchor */
    Arrow: import("react").ForwardRefExoticComponent<ALSNavigationMenuArrowProps & import("react").RefAttributes<HTMLDivElement>>;
    /** A backdrop for the navigation menu popup */
    Backdrop: import("react").ForwardRefExoticComponent<ALSNavigationMenuBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
    /** A styled link card for use within navigation menu content */
    LinkCard: import("react").ForwardRefExoticComponent<ALSNavigationMenuLinkCardProps & import("react").RefAttributes<HTMLAnchorElement>>;
};
export type { ALSNavigationMenuRootProps, ALSNavigationMenuListProps, ALSNavigationMenuItemProps, ALSNavigationMenuTriggerProps, ALSNavigationMenuIconProps, ALSNavigationMenuContentProps, ALSNavigationMenuLinkProps, ALSNavigationMenuPortalProps, ALSNavigationMenuPositionerProps, ALSNavigationMenuPopupProps, ALSNavigationMenuViewportProps, ALSNavigationMenuArrowProps, ALSNavigationMenuBackdropProps, ALSNavigationMenuLinkCardProps, ALSNavigationMenuOrientation, ALSNavigationMenuSize, ALSNavigationMenuVariant, };
//# sourceMappingURL=index.d.ts.map