Skip to main content

Render Menu

Use renderMenu to inject a custom menu between the chat body and the input footer. Combined with setInputValue (via ref), you can build hierarchical quick-reply menus that populate the input on click.

Hierarchical Quick Menu

Click any leaf item in the menu (shown between the chat body and footer in the chatbot panel) and the chatbot input value will be populated automatically.

  • Uses the renderMenu prop
  • Calls setInputValue() via ref
  • Supports nested categories with breadcrumb navigation
Loading chatbot...

Code Example​

const chatbotRef = useRef<ChatbotRef>(null);

<Chatbot
  ref={chatbotRef}
  renderMenu={() => (
    <QuickMenu
      onSelect={(question) => chatbotRef.current?.setInputValue?.(question)}
    />
  )}
  {...rest}
/>;