Skip to main content

Interface: MenuProps

Defined in: components/Menu.tsx:16

Properties​

categoryId​

categoryId: number

Defined in: components/Menu.tsx:28

Base category ID for fetching all categories. This is the root of the menu tree.

className?​

optional className?: string

Defined in: components/Menu.tsx:93

Extra CSS class applied to the root element.

configuration?​

optional configuration?: any

Defined in: components/Menu.tsx:96

Configuration object passed to the component

depth?​

optional depth?: number

Defined in: components/Menu.tsx:53

Maximum nesting depth of the menu hierarchy. Defaults to 3.

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/Menu.tsx:22

Initialised Propeller SDK GraphQL client. Used internally to fetch the category hierarchy. Not required when tree is supplied — that pre-fetched form skips the internal fetch.

labels?​

optional labels?: Record<string, string>

Defined in: components/Menu.tsx:84

Override any UI string. Available keys: loading, error, empty

language?​

optional language?: string

Defined in: components/Menu.tsx:47

Language code for fetching localised category names and slugs. Resolved from PropellerProvider when omitted.

optional menuClass?: string

Defined in: components/Menu.tsx:58

CSS class applied to the menu container element.

optional menuLinkFormat?: string

Defined in: components/Menu.tsx:72

URL pattern for category links. Use {categoryId} and {slug} as placeholders. Defaults to 'category/{categoryId}/{slug}'.

optional menuStyle?: string

Defined in: components/Menu.tsx:65

Main menu display type.

  • 'dropdown-vertical': nested flyout panels on hover (default)
  • 'jumbotron': full-width mega-menu panel showing all subcategories

onMenuItemClick​

onMenuItemClick: (category) => void

Defined in: components/Menu.tsx:78

Called when a menu item is clicked. Use for SPA-style routing instead of full-page navigation.

Parameters​

category​

Category

Returns​

void

tree?​

optional tree?: MenuCategory[]

Defined in: components/Menu.tsx:41

Pre-fetched menu tree. When provided, the component skips its internal useMenu fetch entirely and renders the tree directly — mirrors the ProductGrid.products opt-in. Use this from a Server Component that resolved the tree itself (e.g. via a server-side fetchMenu), so the host can attach Next.js cache hints and the menu HTML lands in the initial response.

When omitted, the component falls back to the legacy client-side fetch via useMenu, identical to the v0.x behaviour.

user?​

optional user?: Contact | Customer | null

Defined in: components/Menu.tsx:90

Authenticated user object. When user changes (login/logout), the menu cache is cleared and the menu is re-fetched.