import React from 'react'; import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading, Badge, Dropdown, DropdownList, DropdownItem, Icon, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; const dropdownItems = [ } key="edit" > Edit , } key="action" > Deployment , } key="apps" > Applications ]; export const BreadcrumbDropdown: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const badgeToggleRef = React.useRef(); const onToggle = () => setIsOpen(!isOpen); const onSelect = () => { setIsOpen((prevIsOpen: boolean) => !prevIsOpen); badgeToggleRef?.current?.focus(); }; return ( Section home setIsOpen(isOpen)} toggle={(toggleRef: React.Ref) => ( {dropdownItems.length} } ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plainText" /> )} isOpen={isOpen} > {dropdownItems.map((dropdownItem) => dropdownItem)} Section title ); };