Skip to main content

Interface: MenuProps

Defined in: components/Menu.tsx:17

Properties​

categoryId​

categoryId: number

Defined in: components/Menu.tsx:29

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

className?​

optional className?: string

Defined in: components/Menu.tsx:125

Extra CSS class applied to the root element.

configuration?​

optional configuration?: any

Defined in: components/Menu.tsx:128

Configuration object passed to the component

depth?​

optional depth?: number

Defined in: components/Menu.tsx:54

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

getUrl?​

optional getUrl?: (category) => string

Defined in: components/Menu.tsx:104

Custom URL builder for category links. Overrides menuLinkFormat / configuration.urls.getCategoryUrl. Lets hosts inject dynamic query strings (e.g. ?contract=…) that a static format string cannot express. Mirrors the getUrl prop on Breadcrumbs.

Parameters​

category​

Category

Returns​

string

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/Menu.tsx:23

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:116

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

language?​

optional language?: string

Defined in: components/Menu.tsx:48

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

optional menuClass?: string

Defined in: components/Menu.tsx:59

CSS class applied to the menu container element.

optional menuLinkFormat?: string

Defined in: components/Menu.tsx:96

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

optional menuStyle?: string & object | "dropdown-vertical" | "jumbotron" | "accordion"

Defined in: components/Menu.tsx:75

Main menu display type.

  • 'dropdown-vertical': nested flyout panels on hover (default). Lays each level out as another 256px column, so it caps at 5 levels.
  • 'jumbotron': full-width mega-menu panel showing all subcategories.
  • 'accordion': inline vertical nesting at every breakpoint. The only style with no depth ceiling — use it for trees deeper than a flyout can show. (Also the mobile presentation of the other styles.)

Typed as MenuStyle | (string & {}) so the built-ins autocomplete while any other value still type-checks — pair a custom value with MenuProps.renderMenu to render it. Without renderMenu, an unrecognised value falls back to 'accordion' and warns in development.

onMenuItemClick​

onMenuItemClick: (category) => void

Defined in: components/Menu.tsx:110

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

Parameters​

category​

Category

Returns​

void

renderMenu?​

optional renderMenu?: (ctx) => ReactNode

Defined in: components/Menu.tsx:89

Render the menu yourself instead of using a built-in menuStyle.

The built-in styles cover the common shapes, but they are just three arrangements of the same tree — this is the escape hatch for a fourth. Receives the fetched categories plus the state and helpers the built-in renderers use, so a custom menu gets working open/close behaviour, URL building and click handling without reimplementing them.

Return null to fall through to the menuStyle rendering (useful for overriding a single breakpoint or category).

Parameters​

ctx​

MenuRenderContext

Returns​

ReactNode

tree?​

optional tree?: MenuCategory[]

Defined in: components/Menu.tsx:42

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:122

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