Docs API reference Headlessnavigation-menu

navigation-menu headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

Machine API

@grassroot/ui-headless-core/navigation-menu

Core connector and vanilla API

30 exports

View source packages/ui-headless/core/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-core

activateNavigationMenuLayer

function

activateNavigationMenuLayerts

declare function activateNavigationMenuLayer<TContent>(service: NavigationMenuService<TContent>, scope: PartScope, doc: Document): () => void;

Name

Kind

Type

Requirement

service

parameter

NavigationMenuService<TContent>

required

scope

parameter

PartScope

required

doc

parameter

Document

required

return

return value

() => void

n/a

Name: service
Kind: parameter
Type: NavigationMenuService<TContent>
Requirement: required

Name: scope
Kind: parameter
Type: PartScope
Requirement: required

Name: doc
Kind: parameter
Type: Document
Requirement: required

Name: return
Kind: return value
Type: () => void
Requirement: n/a

connectNavigationMenu

function

connectNavigationMenuts

declare function connectNavigationMenu<TContent = string>(service: NavigationMenuService<TContent>, scope: PartScope, options?: NavigationMenuConnectOptions): NavigationMenuApi<TContent>;

Name

Kind

Type

Requirement

service

parameter

NavigationMenuService<TContent>

required

scope

parameter

PartScope

required

options

parameter

NavigationMenuConnectOptions

optional

return

return value

NavigationMenuApi<TContent>

n/a

Name: service
Kind: parameter
Type: NavigationMenuService<TContent>
Requirement: required

Name: scope
Kind: parameter
Type: PartScope
Requirement: required

Name: options
Kind: parameter
Type: NavigationMenuConnectOptions
Requirement: optional

Name: return
Kind: return value
Type: NavigationMenuApi<TContent>
Requirement: n/a

mountNavigationMenu

function

mountNavigationMenuts

declare function mountNavigationMenu<TContent = string>(container: HTMLElement, options: MountNavigationMenuOptions<TContent>): NavigationMenuMount<TContent>;

Name

Kind

Type

Requirement

container

parameter

HTMLElement

required

options

parameter

MountNavigationMenuOptions<TContent>

required

return

return value

NavigationMenuMount<TContent>

n/a

Name: container
Kind: parameter
Type: HTMLElement
Requirement: required

Name: options
Kind: parameter
Type: MountNavigationMenuOptions<TContent>
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuMount<TContent>
Requirement: n/a

MountNavigationMenuOptions

interface

MountNavigationMenuOptionsts

interface MountNavigationMenuOptions<TContent = string> extends Omit<NavigationMenuInput$1<TContent>, "items"> {
  readonly items: readonly NavigationMenuItem<TContent>[];
  readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
  readonly messages?: NavigationMenuConnectOptions["messages"];
  readonly scheduler?: Scheduler;
  readonly renderTrigger?: (element: HTMLButtonElement, item: NavigationMenuItem<TContent>, index: number) => void;
  readonly renderLink?: (element: HTMLAnchorElement, link: NonNullable<NavigationMenuItem<TContent>["links"]>[number], index: number) => void;
}

Name

Kind

Type

Requirement

items

property

readonly NavigationMenuItem<TContent>[]

required

messages

property

NavigationMenuConnectOptions["messages"]

optional

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

renderLink

property

(element: HTMLAnchorElement, link: NonNullable<NavigationMenuItem<TContent>["links"]>[number], index: number) => void

optional

renderTrigger

property

(element: HTMLButtonElement, item: NavigationMenuItem<TContent>, index: number) => void

optional

scheduler

property

Scheduler

optional

Name: items
Kind: property
Type: readonly NavigationMenuItem<TContent>[]
Requirement: required

Name: messages
Kind: property
Type: NavigationMenuConnectOptions["messages"]
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: renderLink
Kind: property
Type: (element: HTMLAnchorElement, link: NonNullable<NavigationMenuItem<TContent>["links"]>[number], index: number) => void
Requirement: optional

Name: renderTrigger
Kind: property
Type: (element: HTMLButtonElement, item: NavigationMenuItem<TContent>, index: number) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

navigationMenuAnatomy

value

navigationMenuAnatomyts

export declare const navigationMenuAnatomy: {
  readonly scope: "navigation-menu";
  readonly parts: readonly ["root", "list", "item", "trigger", "content", "link"];
};

Name

Kind

Type

Requirement

parts

property

readonly ["root", "list", "item", "trigger", "content", "link"]

required

scope

property

"navigation-menu"

required

Name: parts
Kind: property
Type: readonly ["root", "list", "item", "trigger", "content", "link"]
Requirement: required

Name: scope
Kind: property
Type: "navigation-menu"
Requirement: required

NavigationMenuApi

interface

NavigationMenuApits

interface NavigationMenuApi<TContent = string> {
  rootProps(): PartProps;
  listProps(): PartProps;
  itemProps(index: number): PartProps;
  triggerProps(index: number): PartProps;
  contentProps(index: number): PartProps;
  linkProps(index: number, linkIndex: number): PartProps;
  readonly open: number | null;
}

Name

Kind

Type

Requirement

contentProps

method

(index: number) => PartProps

required

itemProps

method

(index: number) => PartProps

required

linkProps

method

(index: number, linkIndex: number) => PartProps

required

listProps

method

() => PartProps

required

open

property

number | null

required

rootProps

method

() => PartProps

required

triggerProps

method

(index: number) => PartProps

required

Name: contentProps
Kind: method
Type: (index: number) => PartProps
Requirement: required

Name: itemProps
Kind: method
Type: (index: number) => PartProps
Requirement: required

Name: linkProps
Kind: method
Type: (index: number, linkIndex: number) => PartProps
Requirement: required

Name: listProps
Kind: method
Type: () => PartProps
Requirement: required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: rootProps
Kind: method
Type: () => PartProps
Requirement: required

Name: triggerProps
Kind: method
Type: (index: number) => PartProps
Requirement: required

NavigationMenuChangeReason

type

NavigationMenuChangeReasonts

type NavigationMenuChangeReason = NavigationMenuOpenReason | NavigationMenuCloseReason;

NavigationMenuCloseReason

type

NavigationMenuCloseReasonts

type NavigationMenuCloseReason = "leave" | "escape" | "dismiss" | "programmatic" | "trigger" | "intent";

NavigationMenuCommand

type

NavigationMenuCommandts

type NavigationMenuCommand = (CommandObject & {
  readonly type: "OPEN_CHANGE_REQUEST";
  readonly open: number | null;
  readonly reason: NavigationMenuChangeReason;
}) | ScheduleCommand<NavigationMenuEvent> | CancelCommand;

NavigationMenuConnectOptions

interface

NavigationMenuConnectOptionsts

interface NavigationMenuConnectOptions {
  readonly onOpenChange?: (detail: {
    open: number | null;
    reason: NavigationMenuChangeReason;
  }) => void;
  readonly messages?: Partial<NavigationMenuMessages>;
}

Name

Kind

Type

Requirement

messages

property

Partial<NavigationMenuMessages>

optional

onOpenChange

property

(detail: {
    open: number | null;
    reason: NavigationMenuChangeReason;
  }) => void

optional

Name: messages
Kind: property
Type: Partial<NavigationMenuMessages>
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: { open: number | null; reason: NavigationMenuChangeReason; }) => void
Requirement: optional

NavigationMenuContext

type

NavigationMenuContextts

type NavigationMenuContext = {
  readonly open: number | null;
  readonly mode: "controlled" | "uncontrolled";
};

Name

Kind

Type

Requirement

mode

property

"controlled" | "uncontrolled"

required

open

property

number | null

required

Name: mode
Kind: property
Type: "controlled" | "uncontrolled"
Requirement: required

Name: open
Kind: property
Type: number | null
Requirement: required

NavigationMenuEvent

type

NavigationMenuEventts

type NavigationMenuEvent = {
  readonly type: "OPEN";
  readonly index: number;
  readonly reason: NavigationMenuOpenReason;
} | {
  readonly type: "TOGGLE";
  readonly index: number;
  readonly reason: "trigger";
} | {
  readonly type: "CLOSE";
  readonly reason: NavigationMenuCloseReason;
} | {
  readonly type: "HOVER";
  readonly index: number;
  readonly intent?: NavigationMenuPointerIntent;
} | {
  readonly type: "FOCUS";
  readonly index: number;
} | {
  readonly type: "CLICK";
  readonly index: number;
} | {
  readonly type: "LEAVE";
  readonly intent?: NavigationMenuPointerIntent;
} | {
  readonly type: "ESCAPE";
} | {
  readonly type: "DISMISS";
};

NavigationMenuInput

type

NavigationMenuInputts

type NavigationMenuInput<TContent = string> = Omit<NavigationMenuInput$1, "items"> & {
  readonly items: readonly NavigationMenuItem<TContent>[];
};

Name

Kind

Type

Requirement

items

property

readonly NavigationMenuItem<TContent>[]

required

Name: items
Kind: property
Type: readonly NavigationMenuItem<TContent>[]
Requirement: required

NavigationMenuItem

interface

NavigationMenuItemts

interface NavigationMenuItem<TContent = string> {
  readonly label: TContent;
  readonly links?: readonly NavigationMenuLink<TContent>[];
  readonly href?: string;
  readonly active?: boolean;
}

Name

Kind

Type

Requirement

active

property

boolean

optional

href

property

string

optional

label

property

TContent

required

links

property

readonly NavigationMenuLink<TContent>[]

optional

Name: active
Kind: property
Type: boolean
Requirement: optional

Name: href
Kind: property
Type: string
Requirement: optional

Name: label
Kind: property
Type: TContent
Requirement: required

Name: links
Kind: property
Type: readonly NavigationMenuLink<TContent>[]
Requirement: optional

NavigationMenuLink

interface

NavigationMenuLinkts

interface NavigationMenuLink<TContent = string> {
  readonly label: TContent;
  readonly description?: TContent;
  readonly href?: string;
}

Name

Kind

Type

Requirement

description

property

TContent

optional

href

property

string

optional

label

property

TContent

required

Name: description
Kind: property
Type: TContent
Requirement: optional

Name: href
Kind: property
Type: string
Requirement: optional

Name: label
Kind: property
Type: TContent
Requirement: required

NavigationMenuMachineItem

interface

NavigationMenuMachineItemts

interface NavigationMenuMachineItem<TContent = string> extends NavigationMenuItem<TContent> {
  readonly hasPanel: boolean;
}

Name

Kind

Type

Requirement

hasPanel

property

boolean

required

Name: hasPanel
Kind: property
Type: boolean
Requirement: required

NavigationMenuMount

interface

NavigationMenuMountts

interface NavigationMenuMount<TContent = string> {
  readonly service: NavigationMenuService<TContent>;
  readonly connector: NavigationMenuApi<TContent>;
  readonly root: HTMLElement;
  destroy(): void;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi<TContent>

required

destroy

method

() => void

required

root

property

HTMLElement

required

service

property

NavigationMenuService<TContent>

required

Name: connector
Kind: property
Type: NavigationMenuApi<TContent>
Requirement: required

Name: destroy
Kind: method
Type: () => void
Requirement: required

Name: root
Kind: property
Type: HTMLElement
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService<TContent>
Requirement: required

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

interface NavigationMenuOpenChangeDetail {
  readonly open: number | null;
  readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

navigationMenuSelectors

value

navigationMenuSelectorsts

export declare const navigationMenuSelectors: {
  open: (snapshot: NavigationMenuSnapshot) => number | null;
  isOpen: (snapshot: NavigationMenuSnapshot, index: number) => boolean;
};

Name

Kind

Type

Requirement

isOpen

property

(snapshot: NavigationMenuSnapshot, index: number) => boolean

required

open

property

(snapshot: NavigationMenuSnapshot) => number | null

required

Name: isOpen
Kind: property
Type: (snapshot: NavigationMenuSnapshot, index: number) => boolean
Requirement: required

Name: open
Kind: property
Type: (snapshot: NavigationMenuSnapshot) => number | null
Requirement: required

NavigationMenuService

type

NavigationMenuServicets

type NavigationMenuService<_TContent = string> = Service<NavigationMenuInput$1, NavigationMenuStateValue, NavigationMenuContext, NavigationMenuEvent, NavigationMenuCommand>;

normalizeNavigationMenuInput

function

normalizeNavigationMenuInputts

declare function normalizeNavigationMenuInput<TContent>(input: NavigationMenuInput<TContent>): NavigationMenuMachineInput<TContent>;

Name

Kind

Type

Requirement

input

parameter

NavigationMenuInput<TContent>

required

return

return value

NavigationMenuMachineInput<TContent>

n/a

Name: input
Kind: parameter
Type: NavigationMenuInput<TContent>
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuMachineInput<TContent>
Requirement: n/a

runNavigationMenuCommand

function

runNavigationMenuCommandts

declare function runNavigationMenuCommand<TContent>(command: NavigationMenuCommand, _scope: PartScope, options?: NavigationMenuConnectOptions): void;

Name

Kind

Type

Requirement

command

parameter

NavigationMenuCommand

required

_scope

parameter

PartScope

required

options

parameter

NavigationMenuConnectOptions

optional

return

return value

void

n/a

Name: command
Kind: parameter
Type: NavigationMenuCommand
Requirement: required

Name: _scope
Kind: parameter
Type: PartScope
Requirement: required

Name: options
Kind: parameter
Type: NavigationMenuConnectOptions
Requirement: optional

Name: return
Kind: return value
Type: void
Requirement: n/a

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React imports

Vue imports

@grassroot/ui-headless-vue/navigation-menuts

<script setup lang="ts">
import { Content, Item, Link, List, NavigationMenu, Root, Trigger } from "@grassroot/ui-headless-vue/navigation-menu";
</script>

Angular imports

@grassroot/ui-headless-angular/navigation-menuts

import { Component } from "@angular/core";
import { GR_NAVIGATION_MENU_DECLARATIONS } from "@grassroot/ui-headless-angular/navigation-menu";
 
@Component({ standalone: true, imports: [GR_NAVIGATION_MENU_DECLARATIONS], template: `<!-- compose the navigation-menu parts here -->` })
export class Example {}

Svelte imports

@grassroot/ui-headless-svelte/navigation-menuts

<script lang="ts">
  import { Content, Item, Link, List, NavigationMenu, Root, Trigger } from "@grassroot/ui-headless-svelte/navigation-menu";
</script>

Solid imports

@grassroot/ui-headless-react/navigation-menu

React adapter

21 exports

View source packages/ui-headless/react/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-react

Content

value

Contentts

export declare const Content: import("react").ForwardRefExoticComponent<NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

Item

value

Itemts

export declare const Item: import("react").ForwardRefExoticComponent<NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

Link

value

Linkts

export declare const Link: import("react").ForwardRefExoticComponent<NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

List

value

Listts

export declare const List: import("react").ForwardRefExoticComponent<NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

export declare const NavigationMenu: {
  Root: typeof Root;
  List: import("react").ForwardRefExoticComponent<NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>;
  Item: import("react").ForwardRefExoticComponent<NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
  Trigger: import("react").ForwardRefExoticComponent<NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
  Content: import("react").ForwardRefExoticComponent<NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
  Link: import("react").ForwardRefExoticComponent<NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
};

Name

Kind

Type

Requirement

Content

property

import("react").ForwardRefExoticComponent<NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>

required

Item

property

import("react").ForwardRefExoticComponent<NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>

required

Link

property

import("react").ForwardRefExoticComponent<NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>

required

List

property

import("react").ForwardRefExoticComponent<NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>

required

Root

property

typeof Root

required

Trigger

property

import("react").ForwardRefExoticComponent<NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>

required

Name: Content
Kind: property
Type: import("react").ForwardRefExoticComponent<NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>
Requirement: required

Name: Item
Kind: property
Type: import("react").ForwardRefExoticComponent<NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>
Requirement: required

Name: Link
Kind: property
Type: import("react").ForwardRefExoticComponent<NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>
Requirement: required

Name: List
Kind: property
Type: import("react").ForwardRefExoticComponent<NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>
Requirement: required

Name: Root
Kind: property
Type: typeof Root
Requirement: required

Name: Trigger
Kind: property
Type: import("react").ForwardRefExoticComponent<NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>
Requirement: required

NavigationMenuContentProps

interface

NavigationMenuContentPropsts

interface NavigationMenuContentProps extends ComponentPropsWithoutRef<"div"> {
  readonly asChild?: boolean;
  readonly index: number;
  readonly item: NavigationMenuItem;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

index

property

number

required

item

property

NavigationMenuItem

required

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: index
Kind: property
Type: number
Requirement: required

Name: item
Kind: property
Type: NavigationMenuItem
Requirement: required

NavigationMenuContext

value

NavigationMenuContextts

export declare const NavigationMenuContext: import("react").Context<NavigationMenuContextValue | null>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

NavigationMenuContextValue

interface

NavigationMenuContextValuets

interface NavigationMenuContextValue {
  readonly service: NavigationMenuService;
  readonly connector: NavigationMenuApi;
  readonly scope: PartScope;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

NavigationMenuItemProps

interface

NavigationMenuItemPropsts

interface NavigationMenuItemProps extends ComponentPropsWithoutRef<"li"> {
  readonly asChild?: boolean;
  readonly index: number;
  readonly item: NavigationMenuItem;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

index

property

number

required

item

property

NavigationMenuItem

required

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: index
Kind: property
Type: number
Requirement: required

Name: item
Kind: property
Type: NavigationMenuItem
Requirement: required

NavigationMenuLinkProps

interface

NavigationMenuLinkPropsts

interface NavigationMenuLinkProps extends ComponentPropsWithoutRef<"a"> {
  readonly asChild?: boolean;
  readonly index: number;
  readonly linkIndex: number;
  readonly link: NavigationMenuLink;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

index

property

number

required

link

property

NavigationMenuLink

required

linkIndex

property

number

required

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: index
Kind: property
Type: number
Requirement: required

Name: link
Kind: property
Type: NavigationMenuLink
Requirement: required

Name: linkIndex
Kind: property
Type: number
Requirement: required

NavigationMenuListProps

interface

NavigationMenuListPropsts

interface NavigationMenuListProps extends ComponentPropsWithoutRef<"ul"> {
  readonly asChild?: boolean;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

Name: asChild
Kind: property
Type: boolean
Requirement: optional

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

interface NavigationMenuOpenChangeDetail {
  readonly open: number | null;
  readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

NavigationMenuRootProps

interface

NavigationMenuRootPropsts

interface NavigationMenuRootProps {
  readonly open?: NavigationMenuInput["open"];
  readonly defaultOpen?: NavigationMenuInput["defaultOpen"];
  readonly items: readonly NavigationMenuItem[];
  readonly intentDelayMs?: NavigationMenuInput["intentDelayMs"];
  readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
  readonly scheduler?: UseNavigationMenuOptions["scheduler"];
  readonly asChild?: boolean;
  readonly children?: ReactNode;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

children

property

ReactNode

optional

defaultOpen

property

NavigationMenuInput["defaultOpen"]

optional

intentDelayMs

property

NavigationMenuInput["intentDelayMs"]

optional

items

property

readonly NavigationMenuItem[]

required

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

open

property

NavigationMenuInput["open"]

optional

scheduler

property

UseNavigationMenuOptions["scheduler"]

optional

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: children
Kind: property
Type: ReactNode
Requirement: optional

Name: defaultOpen
Kind: property
Type: NavigationMenuInput["defaultOpen"]
Requirement: optional

Name: intentDelayMs
Kind: property
Type: NavigationMenuInput["intentDelayMs"]
Requirement: optional

Name: items
Kind: property
Type: readonly NavigationMenuItem[]
Requirement: required

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: open
Kind: property
Type: NavigationMenuInput["open"]
Requirement: optional

Name: scheduler
Kind: property
Type: UseNavigationMenuOptions["scheduler"]
Requirement: optional

NavigationMenuTriggerProps

interface

NavigationMenuTriggerPropsts

interface NavigationMenuTriggerProps extends ComponentPropsWithoutRef<"button"> {
  readonly asChild?: boolean;
  readonly index: number;
  readonly item: NavigationMenuItem;
}

Name

Kind

Type

Requirement

asChild

property

boolean

optional

index

property

number

required

item

property

NavigationMenuItem

required

Name: asChild
Kind: property
Type: boolean
Requirement: optional

Name: index
Kind: property
Type: number
Requirement: required

Name: item
Kind: property
Type: NavigationMenuItem
Requirement: required

Root

function

Rootts

declare function Root(props: NavigationMenuRootProps): import("react").JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuRootProps

required

return

return value

import("react").JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuRootProps
Requirement: required

Name: return
Kind: return value
Type: import("react").JSX.Element
Requirement: n/a

Trigger

value

Triggerts

export declare const Trigger: import("react").ForwardRefExoticComponent<NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

Name

Kind

Type

Requirement

props

parameter

P

required

return

return value

ReactNode

n/a

Name: props
Kind: parameter
Type: P
Requirement: required

Name: return
Kind: return value
Type: ReactNode
Requirement: n/a

useNavigationMenu

function

useNavigationMenuts

declare function useNavigationMenu(input: Omit<NavigationMenuInput, "items"> & {
  readonly items: readonly NavigationMenuItem[];
}, options?: UseNavigationMenuOptions): UseNavigationMenuResult;

Name

Kind

Type

Requirement

input

parameter

Omit<NavigationMenuInput, "items"> & {
  readonly items: readonly NavigationMenuItem[];
}

required

options

parameter

UseNavigationMenuOptions

optional

return

return value

UseNavigationMenuResult

n/a

Name: input
Kind: parameter
Type: Omit<NavigationMenuInput, "items"> & { readonly items: readonly NavigationMenuItem[]; }
Requirement: required

Name: options
Kind: parameter
Type: UseNavigationMenuOptions
Requirement: optional

Name: return
Kind: return value
Type: UseNavigationMenuResult
Requirement: n/a

useNavigationMenuContext

function

useNavigationMenuContextts

declare function useNavigationMenuContext(partName: string): NavigationMenuContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

NavigationMenuContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuContextValue
Requirement: n/a

UseNavigationMenuOptions

interface

UseNavigationMenuOptionsts

interface UseNavigationMenuOptions {
  readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
  readonly scheduler?: Scheduler;
}

Name

Kind

Type

Requirement

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

scheduler

property

Scheduler

optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

UseNavigationMenuResult

interface

UseNavigationMenuResultts

interface UseNavigationMenuResult {
  readonly service: NavigationMenuService;
  readonly connector: NavigationMenuApi;
  readonly scope: PartScope;
  readonly snapshot: NavigationMenuSnapshot;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

snapshot

property

NavigationMenuSnapshot

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: snapshot
Kind: property
Type: NavigationMenuSnapshot
Requirement: required

useServiceVersion

function

Subscribes a component to a service's committed-snapshot version.

useServiceVersionts

declare function useServiceVersion<S extends Service<any, any, any, any, any, any>>(service: S): ReturnType<S["getSnapshot"]>;

Name

Kind

Type

Requirement

service

parameter

S

required

return

return value

ReturnType<S["getSnapshot"]>

n/a

Name: service
Kind: parameter
Type: S
Requirement: required

Name: return
Kind: return value
Type: ReturnType<S["getSnapshot"]>
Requirement: n/a

@grassroot/ui-headless-vue/navigation-menu

Vue adapter

14 exports

View source packages/ui-headless/vue/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-vue

Content

value

Contentts

export declare const Content: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

Item

value

Itemts

export declare const Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

Link

value

Linkts

export declare const Link: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  linkIndex: {
    type: NumberConstructor;
    required: true;
  };
  link: {
    type: PropType<NavigationMenuLink$1>;
    required: true;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  linkIndex: {
    type: NumberConstructor;
    required: true;
  };
  link: {
    type: PropType<NavigationMenuLink$1>;
    required: true;
  };
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

List

value

Listts

export declare const List: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

export declare const NavigationMenu: {
  Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    open: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>;
      default: undefined;
    };
    defaultOpen: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>;
      default: undefined;
    };
    items: {
      type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>;
      required: true;
    };
    intentDelayMs: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>;
      default: undefined;
    };
    scheduler: {
      type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>;
      default: undefined;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    openChange: (_detail: NavigationMenuOpenChangeDetail) => true;
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    open: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>;
      default: undefined;
    };
    defaultOpen: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>;
      default: undefined;
    };
    items: {
      type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>;
      required: true;
    };
    intentDelayMs: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>;
      default: undefined;
    };
    scheduler: {
      type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>;
      default: undefined;
    };
  }>> & Readonly<{
    onOpenChange?: ((_detail: NavigationMenuOpenChangeDetail) => any) | undefined;
  }>, {
    asChild: boolean;
    open: number | null | undefined;
    defaultOpen: number | null | undefined;
    intentDelayMs: number | undefined;
    scheduler: import("@grassroot/statechart/scheduler").Scheduler | undefined;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  List: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Trigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Content: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Link: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    linkIndex: {
      type: NumberConstructor;
      required: true;
    };
    link: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    linkIndex: {
      type: NumberConstructor;
      required: true;
    };
    link: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
};

Name

Kind

Type

Requirement

Content

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

Item

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

Link

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    linkIndex: {
      type: NumberConstructor;
      required: true;
    };
    link: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    linkIndex: {
      type: NumberConstructor;
      required: true;
    };
    link: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

List

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

Root

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    open: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>;
      default: undefined;
    };
    defaultOpen: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>;
      default: undefined;
    };
    items: {
      type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>;
      required: true;
    };
    intentDelayMs: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>;
      default: undefined;
    };
    scheduler: {
      type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>;
      default: undefined;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    openChange: (_detail: NavigationMenuOpenChangeDetail) => true;
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    open: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>;
      default: undefined;
    };
    defaultOpen: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>;
      default: undefined;
    };
    items: {
      type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>;
      required: true;
    };
    intentDelayMs: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>;
      default: undefined;
    };
    scheduler: {
      type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>;
      default: undefined;
    };
  }>> & Readonly<{
    onOpenChange?: ((_detail: NavigationMenuOpenChangeDetail) => any) | undefined;
  }>, {
    asChild: boolean;
    open: number | null | undefined;
    defaultOpen: number | null | undefined;
    intentDelayMs: number | undefined;
    scheduler: import("@grassroot/statechart/scheduler").Scheduler | undefined;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

Trigger

property

import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    index: {
      type: NumberConstructor;
      required: true;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>;
      required: true;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

required

Name: Content
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

Name: Item
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

Name: Link
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; linkIndex: { type: NumberConstructor; required: true; }; link: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>; required: true; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; linkIndex: { type: NumberConstructor; required: true; }; link: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuLink>; required: true; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

Name: List
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

Name: Root
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; open: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>; default: undefined; }; defaultOpen: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>; default: undefined; }; items: { type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>; required: true; }; intentDelayMs: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>; default: undefined; }; scheduler: { type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { openChange: (_detail: NavigationMenuOpenChangeDetail) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; open: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["open"]>; default: undefined; }; defaultOpen: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["defaultOpen"]>; default: undefined; }; items: { type: import("vue").PropType<readonly import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem[]>; required: true; }; intentDelayMs: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuInput["intentDelayMs"]>; default: undefined; }; scheduler: { type: import("vue").PropType<UseNavigationMenuOptions["scheduler"]>; default: undefined; }; }>> & Readonly<{ onOpenChange?: ((_detail: NavigationMenuOpenChangeDetail) => any) | undefined; }>, { asChild: boolean; open: number | null | undefined; defaultOpen: number | null | undefined; intentDelayMs: number | undefined; scheduler: import("@grassroot/statechart/scheduler").Scheduler | undefined; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

Name: Trigger
Kind: property
Type: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; index: { type: NumberConstructor; required: true; }; item: { type: import("vue").PropType<import("@grassroot/ui-headless-core/navigation-menu").NavigationMenuItem>; required: true; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
Requirement: required

NavigationMenuContextValue

interface

NavigationMenuContextValuets

interface NavigationMenuContextValue {
  readonly service: NavigationMenuService;
  readonly connector: NavigationMenuApi;
  readonly scope: PartScope;
  readonly snapshot: ShallowRef<NavigationMenuSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

snapshot

property

ShallowRef<NavigationMenuSnapshot>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: snapshot
Kind: property
Type: ShallowRef<NavigationMenuSnapshot>
Requirement: required

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

interface NavigationMenuOpenChangeDetail {
  readonly open: number | null;
  readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

Root

value

Rootts

export declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  open: {
    type: PropType<NavigationMenuInput["open"]>;
    default: undefined;
  };
  defaultOpen: {
    type: PropType<NavigationMenuInput["defaultOpen"]>;
    default: undefined;
  };
  items: {
    type: PropType<readonly NavigationMenuItem[]>;
    required: true;
  };
  intentDelayMs: {
    type: PropType<NavigationMenuInput["intentDelayMs"]>;
    default: undefined;
  };
  scheduler: {
    type: PropType<UseNavigationMenuOptions["scheduler"]>;
    default: undefined;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  openChange: (_detail: NavigationMenuOpenChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  open: {
    type: PropType<NavigationMenuInput["open"]>;
    default: undefined;
  };
  defaultOpen: {
    type: PropType<NavigationMenuInput["defaultOpen"]>;
    default: undefined;
  };
  items: {
    type: PropType<readonly NavigationMenuItem[]>;
    required: true;
  };
  intentDelayMs: {
    type: PropType<NavigationMenuInput["intentDelayMs"]>;
    default: undefined;
  };
  scheduler: {
    type: PropType<UseNavigationMenuOptions["scheduler"]>;
    default: undefined;
  };
}>> & Readonly<{
  onOpenChange?: ((_detail: NavigationMenuOpenChangeDetail) => any) | undefined;
}>, {
  asChild: boolean;
  open: number | null | undefined;
  defaultOpen: number | null | undefined;
  intentDelayMs: number | undefined;
  scheduler: import("@grassroot/statechart/scheduler").Scheduler | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

Trigger

value

Triggerts

export declare const Trigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  asChild: {
    type: BooleanConstructor;
    default: boolean;
  };
  index: {
    type: NumberConstructor;
    required: true;
  };
  item: {
    type: PropType<NavigationMenuItem$1>;
    required: true;
  };
}>> & Readonly<{}>, {
  asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useNavigationMenu

function

useNavigationMenuts

declare function useNavigationMenu(input: NavigationMenuInput | (() => NavigationMenuInput), options?: UseNavigationMenuOptions): UseNavigationMenuResult;

Name

Kind

Type

Requirement

input

parameter

NavigationMenuInput | (() => NavigationMenuInput)

required

options

parameter

UseNavigationMenuOptions

optional

return

return value

UseNavigationMenuResult

n/a

Name: input
Kind: parameter
Type: NavigationMenuInput | (() => NavigationMenuInput)
Requirement: required

Name: options
Kind: parameter
Type: UseNavigationMenuOptions
Requirement: optional

Name: return
Kind: return value
Type: UseNavigationMenuResult
Requirement: n/a

useNavigationMenuContext

function

useNavigationMenuContextts

declare function useNavigationMenuContext(partName: string): NavigationMenuContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

NavigationMenuContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuContextValue
Requirement: n/a

UseNavigationMenuOptions

interface

UseNavigationMenuOptionsts

interface UseNavigationMenuOptions {
  readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
  readonly scheduler?: Scheduler;
}

Name

Kind

Type

Requirement

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

scheduler

property

Scheduler

optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

UseNavigationMenuResult

interface

UseNavigationMenuResultts

interface UseNavigationMenuResult {
  readonly service: NavigationMenuService;
  readonly connector: NavigationMenuApi;
  readonly scope: PartScope;
  readonly snapshot: ShallowRef<NavigationMenuSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

snapshot

property

ShallowRef<NavigationMenuSnapshot>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: snapshot
Kind: property
Type: ShallowRef<NavigationMenuSnapshot>
Requirement: required

@grassroot/ui-headless-angular/navigation-menu

Angular adapter

12 exports

View source packages/ui-headless/angular/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-angular

createNavigationMenuStore

function

createNavigationMenuStorets

export declare function createNavigationMenuStore(initialInput: NavigationMenuInput, options?: CreateNavigationMenuStoreOptions): NavigationMenuStore;

Name

Kind

Type

Requirement

initialInput

parameter

NavigationMenuInput

required

options

parameter

CreateNavigationMenuStoreOptions

optional

return

return value

NavigationMenuStore

n/a

Name: initialInput
Kind: parameter
Type: NavigationMenuInput
Requirement: required

Name: options
Kind: parameter
Type: CreateNavigationMenuStoreOptions
Requirement: optional

Name: return
Kind: return value
Type: NavigationMenuStore
Requirement: n/a

CreateNavigationMenuStoreOptions

interface

CreateNavigationMenuStoreOptionsts

export interface CreateNavigationMenuStoreOptions {
    readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
    readonly onCommit?: () => void;
    readonly scheduler?: Scheduler;
}

Name

Kind

Type

Requirement

onCommit

property

() => void

optional

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

scheduler

property

Scheduler

optional

Name: onCommit
Kind: property
Type: () => void
Requirement: optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

GR_NAVIGATION_MENU_DECLARATIONS

value

GR_NAVIGATION_MENU_DECLARATIONSts

export declare const GR_NAVIGATION_MENU_DECLARATIONS: readonly [typeof GrNavigationMenuRoot, typeof GrNavigationMenuList, typeof GrNavigationMenuItem, typeof GrNavigationMenuTrigger, typeof GrNavigationMenuContent, typeof GrNavigationMenuLink];

GrNavigationMenuContent

class

GrNavigationMenuContentts

export declare class GrNavigationMenuContent extends NavigationMenuPart {
    readonly index: import("@angular/core").InputSignal<number>;
    readonly item: import("@angular/core").InputSignal<NavigationMenuItem<string>>;
    private registered;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuContent, "[grNavigationMenuContent]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

index

property

import("@angular/core").InputSignal<number>

required

item

property

import("@angular/core").InputSignal<NavigationMenuItem<string>>

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuContent, "[grNavigationMenuContent]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuContent, never>

required

registered

property

any

required

Name: index
Kind: property
Type: import("@angular/core").InputSignal<number>
Requirement: required

Name: item
Kind: property
Type: import("@angular/core").InputSignal<NavigationMenuItem<string>>
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuContent, "[grNavigationMenuContent]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuContent, never>
Requirement: required

Name: registered
Kind: property
Type: any
Requirement: required

GrNavigationMenuItem

class

GrNavigationMenuItemts

export declare class GrNavigationMenuItem extends NavigationMenuPart {
    readonly index: import("@angular/core").InputSignal<number>;
    readonly item: import("@angular/core").InputSignal<NavigationMenuItem<string>>;
    private registered;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuItem, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuItem, "[grNavigationMenuItem]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

index

property

import("@angular/core").InputSignal<number>

required

item

property

import("@angular/core").InputSignal<NavigationMenuItem<string>>

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuItem, "[grNavigationMenuItem]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuItem, never>

required

registered

property

any

required

Name: index
Kind: property
Type: import("@angular/core").InputSignal<number>
Requirement: required

Name: item
Kind: property
Type: import("@angular/core").InputSignal<NavigationMenuItem<string>>
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuItem, "[grNavigationMenuItem]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuItem, never>
Requirement: required

Name: registered
Kind: property
Type: any
Requirement: required

GrNavigationMenuLink

class

GrNavigationMenuLinkts

export declare class GrNavigationMenuLink extends NavigationMenuPart {
    readonly index: import("@angular/core").InputSignal<number>;
    readonly linkIndex: import("@angular/core").InputSignal<number>;
    readonly link: import("@angular/core").InputSignal<NavigationMenuLink<string>>;
    private registered;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuLink, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuLink, "[grNavigationMenuLink]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "linkIndex": { "alias": "linkIndex"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

index

property

import("@angular/core").InputSignal<number>

required

link

property

import("@angular/core").InputSignal<NavigationMenuLink<string>>

required

linkIndex

property

import("@angular/core").InputSignal<number>

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuLink, "[grNavigationMenuLink]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "linkIndex": { "alias": "linkIndex"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuLink, never>

required

registered

property

any

required

Name: index
Kind: property
Type: import("@angular/core").InputSignal<number>
Requirement: required

Name: link
Kind: property
Type: import("@angular/core").InputSignal<NavigationMenuLink<string>>
Requirement: required

Name: linkIndex
Kind: property
Type: import("@angular/core").InputSignal<number>
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuLink, "[grNavigationMenuLink]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "linkIndex": { "alias": "linkIndex"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuLink, never>
Requirement: required

Name: registered
Kind: property
Type: any
Requirement: required

GrNavigationMenuList

class

GrNavigationMenuListts

export declare class GrNavigationMenuList extends NavigationMenuPart {
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuList, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuList, "[grNavigationMenuList]", never, {}, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuList, "[grNavigationMenuList]", never, {}, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuList, never>

required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuList, "[grNavigationMenuList]", never, {}, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuList, never>
Requirement: required

GrNavigationMenuRoot

class

GrNavigationMenuRootts

export declare class GrNavigationMenuRoot implements OnDestroy {
    readonly open: import("@angular/core").InputSignal<number | null | undefined>;
    readonly defaultOpen: import("@angular/core").InputSignal<number | null | undefined>;
    readonly items: import("@angular/core").InputSignal<readonly NavigationMenuItem<string>[]>;
    readonly intentDelayMs: import("@angular/core").InputSignal<number | undefined>;
    readonly openChange: import("@angular/core").OutputEmitterRef<NavigationMenuOpenChangeDetail>;
    readonly store: NavigationMenuStore;
    private readonly injector;
    private readonly element;
    private readonly listeners;
    private readonly consumerProps;
    private lastInput;
    private release;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuRoot, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuRoot, "[grNavigationMenuRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "intentDelayMs": { "alias": "intentDelayMs"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>;
}

Name

Kind

Type

Requirement

consumerProps

property

any

required

defaultOpen

property

import("@angular/core").InputSignal<number | null | undefined>

required

element

property

any

required

injector

property

any

required

intentDelayMs

property

import("@angular/core").InputSignal<number | undefined>

required

items

property

import("@angular/core").InputSignal<readonly NavigationMenuItem<string>[]>

required

lastInput

property

any

required

listeners

property

any

required

ngOnDestroy

method

() => void

required

open

property

import("@angular/core").InputSignal<number | null | undefined>

required

openChange

property

import("@angular/core").OutputEmitterRef<NavigationMenuOpenChangeDetail>

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuRoot, "[grNavigationMenuRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "intentDelayMs": { "alias": "intentDelayMs"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuRoot, never>

required

release

property

any

required

Name: consumerProps
Kind: property
Type: any
Requirement: required

Name: defaultOpen
Kind: property
Type: import("@angular/core").InputSignal<number | null | undefined>
Requirement: required

Name: element
Kind: property
Type: any
Requirement: required

Name: injector
Kind: property
Type: any
Requirement: required

Name: intentDelayMs
Kind: property
Type: import("@angular/core").InputSignal<number | undefined>
Requirement: required

Name: items
Kind: property
Type: import("@angular/core").InputSignal<readonly NavigationMenuItem<string>[]>
Requirement: required

Name: lastInput
Kind: property
Type: any
Requirement: required

Name: listeners
Kind: property
Type: any
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: open
Kind: property
Type: import("@angular/core").InputSignal<number | null | undefined>
Requirement: required

Name: openChange
Kind: property
Type: import("@angular/core").OutputEmitterRef<NavigationMenuOpenChangeDetail>
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuRoot, "[grNavigationMenuRoot]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "intentDelayMs": { "alias": "intentDelayMs"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuRoot, never>
Requirement: required

Name: release
Kind: property
Type: any
Requirement: required

Name: store
Kind: property
Type: NavigationMenuStore
Requirement: required

GrNavigationMenuTrigger

class

GrNavigationMenuTriggerts

export declare class GrNavigationMenuTrigger extends NavigationMenuPart {
    readonly index: import("@angular/core").InputSignal<number>;
    readonly item: import("@angular/core").InputSignal<NavigationMenuItem<string>>;
    private registered;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrNavigationMenuTrigger, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrNavigationMenuTrigger, "[grNavigationMenuTrigger]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

Name

Kind

Type

Requirement

index

property

import("@angular/core").InputSignal<number>

required

item

property

import("@angular/core").InputSignal<NavigationMenuItem<string>>

required

ngOnDestroy

method

() => void

required

ɵdir

property

i0.ɵɵDirectiveDeclaration<GrNavigationMenuTrigger, "[grNavigationMenuTrigger]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>

required

ɵfac

property

i0.ɵɵFactoryDeclaration<GrNavigationMenuTrigger, never>

required

registered

property

any

required

Name: index
Kind: property
Type: import("@angular/core").InputSignal<number>
Requirement: required

Name: item
Kind: property
Type: import("@angular/core").InputSignal<NavigationMenuItem<string>>
Requirement: required

Name: ngOnDestroy
Kind: method
Type: () => void
Requirement: required

Name: ɵdir
Kind: property
Type: i0.ɵɵDirectiveDeclaration<GrNavigationMenuTrigger, "[grNavigationMenuTrigger]", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>
Requirement: required

Name: ɵfac
Kind: property
Type: i0.ɵɵFactoryDeclaration<GrNavigationMenuTrigger, never>
Requirement: required

Name: registered
Kind: property
Type: any
Requirement: required

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

export interface NavigationMenuOpenChangeDetail {
    readonly open: number | null;
    readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

NavigationMenuStore

interface

NavigationMenuStorets

export interface NavigationMenuStore {
    readonly service: NavigationMenuService;
    readonly connector: NavigationMenuApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: NavigationMenuInput): void;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

start

method

() => void

required

stop

method

() => void

required

sync

method

(input: NavigationMenuInput) => void

required

version

property

WritableSignal<number>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: start
Kind: method
Type: () => void
Requirement: required

Name: stop
Kind: method
Type: () => void
Requirement: required

Name: sync
Kind: method
Type: (input: NavigationMenuInput) => void
Requirement: required

Name: version
Kind: property
Type: WritableSignal<number>
Requirement: required

@grassroot/ui-headless-svelte/navigation-menu

Svelte adapter

13 exports

View source packages/ui-headless/svelte/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-svelte

Content

value

Contentts

export declare const Content: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

createNavigationMenu

function

createNavigationMenuts

export declare function createNavigationMenu(inputGetter: () => NavigationMenuInput, options?: UseNavigationMenuOptions): UseNavigationMenuResult;

Name

Kind

Type

Requirement

inputGetter

parameter

() => NavigationMenuInput

required

options

parameter

UseNavigationMenuOptions

optional

return

return value

UseNavigationMenuResult

n/a

Name: inputGetter
Kind: parameter
Type: () => NavigationMenuInput
Requirement: required

Name: options
Kind: parameter
Type: UseNavigationMenuOptions
Requirement: optional

Name: return
Kind: return value
Type: UseNavigationMenuResult
Requirement: n/a

Item

value

Itemts

export declare const Item: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

Link

value

Linkts

export declare const Link: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

List

value

Listts

export declare const List: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

export declare const NavigationMenu: {
    Root: import("svelte/legacy").LegacyComponentType;
    List: import("svelte/legacy").LegacyComponentType;
    Item: import("svelte/legacy").LegacyComponentType;
    Trigger: import("svelte/legacy").LegacyComponentType;
    Content: import("svelte/legacy").LegacyComponentType;
    Link: import("svelte/legacy").LegacyComponentType;
};

Name

Kind

Type

Requirement

Content

property

import("svelte/legacy").LegacyComponentType

required

Item

property

import("svelte/legacy").LegacyComponentType

required

Link

property

import("svelte/legacy").LegacyComponentType

required

List

property

import("svelte/legacy").LegacyComponentType

required

Root

property

import("svelte/legacy").LegacyComponentType

required

Trigger

property

import("svelte/legacy").LegacyComponentType

required

Name: Content
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

Name: Item
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

Name: Link
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

Name: List
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

Name: Root
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

Name: Trigger
Kind: property
Type: import("svelte/legacy").LegacyComponentType
Requirement: required

NavigationMenuContextValue

interface

NavigationMenuContextValuets

export interface NavigationMenuContextValue {
    readonly service: NavigationMenuService;
    readonly connector: NavigationMenuApi;
    readonly scope: PartScope;
    readonly version: () => number;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

version

property

() => number

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: version
Kind: property
Type: () => number
Requirement: required

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

export interface NavigationMenuOpenChangeDetail {
    readonly open: number | null;
    readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

Root

value

Rootts

export declare const Root: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

Trigger

value

Triggerts

export declare const Trigger: LegacyComponentType;

Name

Kind

Type

Requirement

args

parameter

Parameters<Component<Record<string, any>>>

optional

return

return value

ReturnType<Component<Record<string, any>, Record<string, any>>>

n/a

Name: args
Kind: parameter
Type: Parameters<Component<Record<string, any>>>
Requirement: optional

Name: return
Kind: return value
Type: ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement: n/a

useNavigationMenuContext

function

useNavigationMenuContextts

export declare function useNavigationMenuContext(partName: string): NavigationMenuContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

NavigationMenuContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuContextValue
Requirement: n/a

UseNavigationMenuOptions

interface

UseNavigationMenuOptionsts

export interface UseNavigationMenuOptions {
    readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
    readonly scheduler?: Scheduler;
}

Name

Kind

Type

Requirement

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

scheduler

property

Scheduler

optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

UseNavigationMenuResult

interface

UseNavigationMenuResultts

export interface UseNavigationMenuResult {
    readonly service: NavigationMenuService;
    readonly connector: NavigationMenuApi;
    readonly scope: PartScope;
    readonly version: Readable<number>;
    readonly syncInput: (input: NavigationMenuInput) => void;
    readonly refresh: () => void;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

refresh

property

() => void

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

syncInput

property

(input: NavigationMenuInput) => void

required

version

property

Readable<number>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: refresh
Kind: property
Type: () => void
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: syncInput
Kind: property
Type: (input: NavigationMenuInput) => void
Requirement: required

Name: version
Kind: property
Type: Readable<number>
Requirement: required

@grassroot/ui-headless-solid/navigation-menu

Solid adapter

14 exports

View source packages/ui-headless/solid/src/navigation-menu/index.ts

Install npm i @grassroot/ui-headless-solid

Content

function

Contentts

export declare function Content(props: NavigationMenuContentProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuContentProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuContentProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

Item

function

Itemts

export declare function Item(props: NavigationMenuItemProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuItemProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuItemProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

Link

function

Linkts

export declare function Link(props: NavigationMenuLinkProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuLinkProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuLinkProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

List

function

Listts

export declare function List(props: NavigationMenuListProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuListProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuListProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

NavigationMenuContext

value

NavigationMenuContextts

export declare const NavigationMenuContext: import("solid-js").Context<NavigationMenuContextValue | undefined>;

NavigationMenuContextValue

interface

NavigationMenuContextValuets

export interface NavigationMenuContextValue {
    readonly service: NavigationMenuService;
    readonly connector: NavigationMenuApi;
    readonly scope: PartScope;
    readonly snapshot: Accessor<NavigationMenuSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

snapshot

property

Accessor<NavigationMenuSnapshot>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: snapshot
Kind: property
Type: Accessor<NavigationMenuSnapshot>
Requirement: required

NavigationMenuOpenChangeDetail

interface

NavigationMenuOpenChangeDetailts

export interface NavigationMenuOpenChangeDetail {
    readonly open: number | null;
    readonly reason: NavigationMenuChangeReason;
}

Name

Kind

Type

Requirement

open

property

number | null

required

reason

property

NavigationMenuChangeReason

required

Name: open
Kind: property
Type: number | null
Requirement: required

Name: reason
Kind: property
Type: NavigationMenuChangeReason
Requirement: required

Root

function

Rootts

export declare function NavigationMenuRoot(props: NavigationMenuRootProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuRootProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuRootProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

Trigger

function

Triggerts

export declare function Trigger(props: NavigationMenuTriggerProps): JSX.Element;

Name

Kind

Type

Requirement

props

parameter

NavigationMenuTriggerProps

required

return

return value

JSX.Element

n/a

Name: props
Kind: parameter
Type: NavigationMenuTriggerProps
Requirement: required

Name: return
Kind: return value
Type: JSX.Element
Requirement: n/a

useNavigationMenu

function

useNavigationMenuts

export declare function useNavigationMenu(input: Accessor<CoreNavigationMenuInput>, options?: UseNavigationMenuOptions): UseNavigationMenuResult;

Name

Kind

Type

Requirement

input

parameter

Accessor<CoreNavigationMenuInput>

required

options

parameter

UseNavigationMenuOptions

optional

return

return value

UseNavigationMenuResult

n/a

Name: input
Kind: parameter
Type: Accessor<CoreNavigationMenuInput>
Requirement: required

Name: options
Kind: parameter
Type: UseNavigationMenuOptions
Requirement: optional

Name: return
Kind: return value
Type: UseNavigationMenuResult
Requirement: n/a

useNavigationMenuContext

function

useNavigationMenuContextts

export declare function useNavigationMenuContext(partName: string): NavigationMenuContextValue;

Name

Kind

Type

Requirement

partName

parameter

string

required

return

return value

NavigationMenuContextValue

n/a

Name: partName
Kind: parameter
Type: string
Requirement: required

Name: return
Kind: return value
Type: NavigationMenuContextValue
Requirement: n/a

UseNavigationMenuOptions

interface

UseNavigationMenuOptionsts

export interface UseNavigationMenuOptions {
    readonly onOpenChange?: (detail: NavigationMenuOpenChangeDetail) => void;
    readonly scheduler?: Scheduler;
}

Name

Kind

Type

Requirement

onOpenChange

property

(detail: NavigationMenuOpenChangeDetail) => void

optional

scheduler

property

Scheduler

optional

Name: onOpenChange
Kind: property
Type: (detail: NavigationMenuOpenChangeDetail) => void
Requirement: optional

Name: scheduler
Kind: property
Type: Scheduler
Requirement: optional

UseNavigationMenuResult

interface

UseNavigationMenuResultts

export interface UseNavigationMenuResult {
    readonly service: NavigationMenuService;
    readonly connector: NavigationMenuApi;
    readonly scope: PartScope;
    readonly snapshot: Accessor<NavigationMenuSnapshot>;
}

Name

Kind

Type

Requirement

connector

property

NavigationMenuApi

required

scope

property

PartScope

required

service

property

NavigationMenuService

required

snapshot

property

Accessor<NavigationMenuSnapshot>

required

Name: connector
Kind: property
Type: NavigationMenuApi
Requirement: required

Name: scope
Kind: property
Type: PartScope
Requirement: required

Name: service
Kind: property
Type: NavigationMenuService
Requirement: required

Name: snapshot
Kind: property
Type: Accessor<NavigationMenuSnapshot>
Requirement: required

Framework adapters

React imports

Vue imports

Angular imports

Svelte imports

Solid imports

Related references