How to show dropdown options in fluent UI breadcrumbs

Question

i wanted to show dropdown in fluent ui breadcrumbs help on building the code. please refer below image

Reference image copied from azure devops

Answer 1

To show the dropdown menu at breadcrumbs, you need CommandBarButton as the trigger of the dropdown and menuProps that contain the menu's item objects and pass the CommandBarButton at Breadcrumb's last item onRenderContent event handler.

Don't forget to memoize both breadcrumb's items and dropdown menuProps.

  import { CommandBarButton } from "@fluentui/react/lib/Button";
  ...

  const menuProps: IContextualMenuProps = React.useMemo(() => {
    return {
      items: [
        {
          key: "def",
          text: "Dev",
          onClick: () => setEnvironment("Dev"),
          onRenderContent: () => {
            return <MenuItem label="Dev" environment={environment} />;
          }
        },
        ...
      ]
    };
  }, [environment, setEnvironment]);

  const items: IBreadcrumbItem[] = React.useMemo(() => {
    return [
      { text: "Files", key: "Files", onClick: _onBreadcrumbItemClicked },
      { text: "Folder 1", key: "f1", onClick: _onBreadcrumbItemClicked },
      ...
      { text: "Folder 6", key: "f6", onClick: _onBreadcrumbItemClicked },
      {
        text: "Folder 11",
        key: "f11",
        onClick: _onBreadcrumbItemClicked,
        isCurrentItem: true,
        onRenderContent: () => {
          return (
            <CommandBarButton
              style={{
                fontSize: 18,
                fontWeight: "bold",
                height: "30px",
                padding: 0,
                background: "transparent"
              }}
              text={environment}
              iconProps={null}
              disabled={false}
              checked={false}
              menuProps={menuProps}
            />
          );
        }
      }
    ];
  }, [environment, menuProps]);

This is the complete code: