Nesting Dropdown inside Step in Ant Design

Question

I use an Ant Design <Steps> Component on my website.

In addition, I also want to have a <Dropdown> Component applied in my last <Step>, something like this:

<Steps current={1}>
  <Step title="Finished" description="This is a description." />
  <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
  <Dropdown overlay={myOwnDropdownWithLinks}>
    <Step title="Waiting" description="This is another description." />
  </Dropdown>
</Steps>

I can't assign a <Dropdown> Component inside a <Steps> Component, so I'm looking for a workaround for this behavior.

How can I assign a dropdown to a particular step? Is it possible to nest these kinds of components?

Answer 1

Refer to Steps API

Props:

• description: Description of the step, optional
• icon: Icon of the step, optional
• title: Title of the step
• subTitle: Subtitle of the step

They all have the type of string|ReactNode, this means you can directly pass the JSX component to them via those props.

<Step title={<StepDropdown />} />

---

Example:

import { Steps, Menu, Dropdown } from "antd";
import { DownOutlined } from "@ant-design/icons";
const { Step } = Steps;

const menu = (
  <Menu>
    <Menu.Item>A</Menu.Item>
    <Menu.Item>B</Menu.Item>
    <Menu.Item>C</Menu.Item>
  </Menu>
);

const StepDropdown = () => {
  return (
    <Dropdown overlay={menu}>
      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        Hover me <DownOutlined />
      </a>
    </Dropdown>
  );
};

const App = () => {
  return (
    <Steps current={1}>
      <Step title={<StepDropdown />} description="This is a description." />
      <Step title="In Progress" description="This is a description." />
      <Step title="Waiting" description="This is a description." />
    </Steps>
  );
};