@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/masthead/react-demos.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIcon from '../../../../../react-core/src/demos/./assets/pf-logo-small.svg';
+import pfLogo from '../../../../../react-core/src/demos/./assets/PF-HorizontalLogo-Color.svg';
+import srcImporthorizontalnav from './react-demos/horizontal-nav.png';
+import srcImportmastheadwithutilitiesanduserdropdownmenu from './react-demos/masthead-with-utilities-and-user-dropdown-menu.png';
+import srcImportutilitiesanduserdropdownmenu from './react-demos/utilities-and-user-dropdown-menu.png';
+const pageData = {
+  "id": "Masthead",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/masthead/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Masthead.md",
+  "relPath": "packages/react-core/src/demos/Masthead.md",
+  "fullscreenExamples": [
+    "Utilities and user dropdown menu",
+    "Horizontal nav"
+  ]
+};
+pageData.liveContext = {
+  cloneElement,
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  RhUiMenuBarsIcon,
+  RhUiEllipsisVerticalFillIcon,
+  RhUiNotificationFillIcon,
+  RhUiSettingsFillIcon,
+  HelpIcon,
+  RhUiQuestionMarkCircleFillIcon,
+  RhUiThumbnailViewSmallFillIcon,
+  imgAvatar,
+  pfIcon,
+  pfLogo
+};
+pageData.examples = {
+  'Utilities and user dropdown menu': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportutilitiesanduserdropdownmenu} {...{"code":"import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  Popper,\n  SkipToContent,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem,\n  MenuGroup,\n  MenuSearchInput,\n  SearchInput,\n  Tooltip\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfIcon from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\n\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(1);\n\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [refFullOptions, setRefFullOptions] = useState<Element[]>();\n  const [favorites, setFavorites] = useState<string[]>([]);\n  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);\n  const [searchValue, setSearchValue] = useState('');\n  const menuRef = useRef<HTMLDivElement>(null);\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const handleMenuKeys = (event: KeyboardEvent) => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current?.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (isOpen && !menuRef.current?.contains(event.target as Node)) {\n      setIsOpen(false);\n    }\n  };\n\n  const onToggleClick = (ev: React.MouseEvent) => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector(\n          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'\n        );\n        firstElement && (firstElement as HTMLElement).focus();\n        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])>*:first-child')));\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const toggle = (\n    <MenuToggle\n      aria-label=\"Toggle\"\n      ref={toggleRef}\n      variant=\"plain\"\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={{ width: 'auto' }}\n      icon={<RhUiThumbnailViewSmallFillIcon />}\n    />\n  );\n\n  const menuItems = [\n    <MenuGroup key=\"group1\" label=\"Group 1\">\n      <MenuList>\n        <MenuItem itemId=\"0\" id=\"0\" isFavorited={favorites.includes('0')}>\n          Application 1\n        </MenuItem>\n        <MenuItem\n          itemId=\"1\"\n          id=\"1\"\n          isFavorited={favorites.includes('1')}\n          to=\"#default-link2\"\n          onClick={(ev) => ev.preventDefault()}\n        >\n          Application 2\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group1-divider\" />,\n    <MenuGroup key=\"group2\" label=\"Group 2\">\n      <MenuList>\n        <MenuItem\n          itemId=\"2\"\n          id=\"2\"\n          isFavorited={favorites.includes('2')}\n          to=\"#default-link3\"\n          onClick={(ev) => ev.preventDefault()}\n        >\n          Application 3\n        </MenuItem>\n        <MenuItem\n          itemId=\"3\"\n          id=\"3\"\n          isFavorited={favorites.includes('3')}\n          isExternalLink\n          icon={<img src={pfIcon} />}\n          to=\"#default-link4\"\n          onClick={(ev) => ev.preventDefault()}\n        >\n          Application 4 with icon\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group2-divider\" />,\n    <MenuList key=\"other-items\">\n      <MenuItem key=\"tooltip-app\" isFavorited={favorites.includes('4')} itemId=\"4\" id=\"4\">\n        <Tooltip content={<div>Launch Application 4</div>} position=\"right\">\n          <span>Application 4 with tooltip</span>\n        </Tooltip>\n      </MenuItem>\n      <MenuItem key=\"disabled-app\" itemId=\"5\" id=\"5\" isDisabled>\n        Unavailable Application\n      </MenuItem>\n    </MenuList>\n  ];\n\n  const createFavorites = (favIds: string[]) => {\n    const favorites: unknown[] = [];\n\n    menuItems.forEach((item) => {\n      if (item.type === MenuList) {\n        item.props.children.filter((child) => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else if (item.type === MenuGroup) {\n        item.props.children.props.children.filter((child) => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else {\n        if (favIds.includes(item.props.itemId)) {\n          favorites.push(item);\n        }\n      }\n    });\n\n    return favorites;\n  };\n\n  const filterItems = (items: any[], filteredIds: string[]) => {\n    if (filteredIds.length === 1 && filteredIds[0] === '*') {\n      return items;\n    }\n    let keepDivider = false;\n    const filteredCopy = items\n      .map((group) => {\n        if (group.type === MenuGroup) {\n          const filteredGroup = cloneElement(group, {\n            children: cloneElement(group.props.children, {\n              children: group.props.children.props.children.filter((child) => {\n                if (filteredIds.includes(child.props.itemId)) {\n                  return child;\n                }\n              })\n            })\n          });\n          const filteredList = filteredGroup.props.children;\n          if (filteredList.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else if (group.type === MenuList) {\n          const filteredGroup = cloneElement(group, {\n            children: group.props.children.filter((child) => {\n              if (filteredIds.includes(child.props.itemId)) {\n                return child;\n              }\n            })\n          });\n          if (filteredGroup.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else {\n          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {\n            return group;\n          }\n        }\n      })\n      .filter((newGroup) => newGroup);\n\n    if (filteredCopy.length > 0) {\n      const lastGroup = filteredCopy.pop();\n      if (lastGroup.type !== Divider) {\n        filteredCopy.push(lastGroup);\n      }\n    }\n\n    return filteredCopy;\n  };\n\n  const onTextChange = (textValue: string) => {\n    setSearchValue(textValue);\n    if (textValue === '') {\n      setFilteredIds(['*']);\n      return;\n    }\n\n    const filteredIds =\n      refFullOptions\n        ?.filter((item) => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))\n        .map((item) => item.id) || [];\n    setFilteredIds(filteredIds);\n  };\n\n  const onFavorite = (event: any, itemId: string, actionId: string) => {\n    event.stopPropagation();\n    if (actionId === 'fav') {\n      const isFavorite = favorites.includes(itemId);\n      if (isFavorite) {\n        setFavorites(favorites.filter((fav) => fav !== itemId));\n      } else {\n        setFavorites([...favorites, itemId]);\n      }\n    }\n  };\n\n  const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);\n  const filteredItems = filterItems(menuItems, filteredIds);\n  if (filteredItems.length === 0) {\n    filteredItems.push(<MenuItem key=\"no-items\">No results found</MenuItem>);\n  }\n\n  const menu = (\n    // eslint-disable-next-line no-console\n    <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuSearchInput>\n        <SearchInput\n          aria-label=\"Filter menu items\"\n          value={searchValue}\n          onChange={(_event, value) => onTextChange(value)}\n          onClear={(event) => {\n            event.stopPropagation();\n            onTextChange('');\n          }}\n        />\n      </MenuSearchInput>\n      <Divider />\n      <MenuContent>\n        {filteredFavorites.length > 0 && (\n          <Fragment>\n            <MenuGroup key=\"favorites-group\" label=\"Favorites\">\n              <MenuList>{filteredFavorites}</MenuList>\n            </MenuGroup>\n            <Divider key=\"favorites-divider\" />\n          </Fragment>\n        )}\n        {filteredItems}\n      </MenuContent>\n    </Menu>\n  );\n\n  const dashboardBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem key=\"settings\">\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem key=\"help\">\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = [\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  ];\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\" isStatic>\n      <ToolbarContent>\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>\n              <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const pageNav = (\n    <Nav onSelect={onNavSelect} aria-label=\"Nav\">\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0} to=\"#system-panel\">\n          System panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1} to=\"#policy\">\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2} to=\"#auth\">\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3} to=\"#network\">\n          Network services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4} to=\"#server\">\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const mainContainerId = 'main-content-page-layout-tertiary-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      sidebar={sidebar}\n      isManagedSidebar\n      skipToContent={pageSkipToContent}\n      breadcrumb={dashboardBreadcrumb}\n      mainContainerId={mainContainerId}\n      isHorizontalSubnavWidthLimited\n      isBreadcrumbWidthLimited\n      isBreadcrumbGrouped\n      additionalGroupedContent={\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>This is a full page demo.</p>\n          </Content>\n        </PageSection>\n      }\n    >\n      <PageSection aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 10 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Utilities and user dropdown menu","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.`}
+      </p>
+    </Example>,
+  'Horizontal nav': props => 
+    <Example {...pageData} {...props} thumbnail={srcImporthorizontalnav} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageSection,\n  SkipToContent,\n  Content,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';\n\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const MastheadWithHorizontalNav: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(0);\n\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const handleMenuKeys = (event: KeyboardEvent) => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current?.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (isOpen && !menuRef.current?.contains(event.target as Node)) {\n      setIsOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const dashboardBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem key=\"settings\">\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem key=\"help\">\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = [\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  ];\n\n  const PageHorizontalNav = () => (\n    <ToolbarItem isOverflowContainer>\n      <Nav\n        id=\"page-layout-horizontal-nav-horizontal-nav\"\n        onSelect={onNavSelect}\n        aria-label=\"Global\"\n        variant=\"horizontal\"\n      >\n        <NavList>\n          <NavItem itemId={0} isActive={activeItem === 0} to=\"#horizontal-1\">\n            Horizontal nav item 1\n          </NavItem>\n          <NavItem itemId={1} isActive={activeItem === 1} to=\"#horizontal-2\">\n            Horizontal nav item 2\n          </NavItem>\n          <NavItem itemId={2} isActive={activeItem === 2} to=\"#horizontal-3\">\n            Horizontal nav item 3\n          </NavItem>\n          <NavItem itemId={3} isActive={activeItem === 3} to=\"#horizontal-4\">\n            Horizontal nav item 4\n          </NavItem>\n          <NavItem itemId={4} isActive={activeItem === 4} to=\"#horizontal-5\">\n            Horizontal nav item 5\n          </NavItem>\n          <NavItem itemId={5} isActive={activeItem === 4} to=\"#horizontal-6\">\n            Horizontal nav item 6\n          </NavItem>\n          <NavItem itemId={6} isActive={activeItem === 4} to=\"#horizontal-7\">\n            Horizontal nav item 7\n          </NavItem>\n        </NavList>\n      </Nav>\n    </ToolbarItem>\n  );\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\">\n      <ToolbarContent>\n        <PageHorizontalNav />\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const mainContainerId = 'main-content-page-layout-tertiary-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      isManagedSidebar\n      skipToContent={pageSkipToContent}\n      breadcrumb={dashboardBreadcrumb}\n      mainContainerId={mainContainerId}\n      isBreadcrumbWidthLimited\n      isBreadcrumbGrouped\n      additionalGroupedContent={\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <Content component=\"h1\" id=\"main-title\">\n              Main title\n            </Content>\n            <Content component=\"p\">This is a full page demo.</Content>\n          </Content>\n        </PageSection>\n      }\n    >\n      <PageSection aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 10 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Horizontal nav","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Utilities and user dropdown menu"])}
+    {React.createElement(pageData.examples["Horizontal nav"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMastheadReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/masthead/react.js

@@ -0,0 +1,291 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
+import pfIcon from '../../../../../react-core/src/components/Masthead/examples/../../assets/PF-HorizontalLogo-Color.svg';
+const pageData = {
+  "id": "Masthead",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/masthead/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Masthead/examples/Masthead.md",
+  "relPath": "packages/react-core/src/components/Masthead/examples/Masthead.md",
+  "propComponents": [
+    {
+      "name": "Masthead",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead"
+        },
+        {
+          "name": "display",
+          "type": "{\n  default?: 'inline' | 'stack';\n  sm?: 'inline' | 'stack';\n  md?: 'inline' | 'stack';\n  lg?: 'inline' | 'stack';\n  xl?: 'inline' | 'stack';\n  '2xl'?: 'inline' | 'stack';\n}",
+          "description": "Display type at various breakpoints",
+          "defaultValue": "{\n  md: 'inline'\n}"
+        },
+        {
+          "name": "inset",
+          "type": "{\n  default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n}",
+          "description": "Insets at various breakpoints"
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'docked'",
+          "description": "Indicates the variant of the masthead",
+          "defaultValue": "'default'",
+          "beta": true
+        }
+      ]
+    },
+    {
+      "name": "MastheadToggle",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead toggle."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead toggle."
+        }
+      ]
+    },
+    {
+      "name": "MastheadMain",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead main block."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead main."
+        }
+      ]
+    },
+    {
+      "name": "MastheadBrand",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead brand."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead brand."
+        }
+      ]
+    },
+    {
+      "name": "MastheadLogo",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead logo."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead logo."
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Component type of the masthead logo."
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Flag indicating the logo is a compact variant. Used in docked layouts.",
+          "defaultValue": "false",
+          "beta": true
+        }
+      ]
+    },
+    {
+      "name": "MastheadContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of the masthead content block."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the masthead content."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-masthead"
+  ],
+  "examples": [
+    "Basic",
+    "Basic with mixed content",
+    "Display inline",
+    "Display stack",
+    "Display stack, display inline responsive",
+    "Inset",
+    "Custom logo component"
+  ]
+};
+pageData.liveContext = {
+  RhUiMenuBarsIcon,
+  pfIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button\n} from '@patternfly/react-core';\n\nexport const MastheadBasic: React.FunctionComponent = () => (\n  <Masthead id=\"basic-example\">\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic with mixed content': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\n\nexport const MastheadBasicMixedContent: React.FunctionComponent = () => (\n  <Masthead id=\"basic-mixed\">\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <Flex>\n        <span>Content</span>\n        <Button>Primary</Button>\n        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>\n          <Button variant=\"secondary\">Secondary</Button>\n        </FlexItem>\n        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>\n          <Button variant=\"tertiary\">Tertiary</Button>\n        </FlexItem>\n      </Flex>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Basic with mixed content","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Display inline': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button\n} from '@patternfly/react-core';\n\nexport const MastheadDisplayInline: React.FunctionComponent = () => (\n  <Masthead id=\"inline-masthead\" display={{ default: 'inline' }}>\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Display inline","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Display stack': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button\n} from '@patternfly/react-core';\n\nexport const MastheadDisplayStack: React.FunctionComponent = () => (\n  <Masthead id=\"stack-masthead\" display={{ default: 'stack' }}>\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Display stack","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Display stack, display inline responsive': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button\n} from '@patternfly/react-core';\n\nexport const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (\n  <Masthead id=\"stack-inline-masthead\" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Display stack, display inline responsive","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inset': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button\n} from '@patternfly/react-core';\n\nexport const MastheadInsets: React.FunctionComponent = () => (\n  <Masthead id=\"inset-masthead\" inset={{ default: 'insetSm' }}>\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component=\"a\">Logo</MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Inset","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom logo component': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  Button,\n  Brand\n} from '@patternfly/react-core';\nimport pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';\n\nexport const MastheadLogoCustomComponent: React.FunctionComponent = () => (\n  <Masthead id=\"icon-router-link\">\n    <MastheadMain>\n      <MastheadToggle>\n        <Button variant=\"plain\" isHamburger onClick={() => {}} aria-label=\"Global navigation\" />\n      </MastheadToggle>\n      <MastheadBrand>\n        <MastheadLogo component={(props) => <a {...props} href=\"#\" />}>\n          <Brand src={pfIcon} alt=\"PatternFly\" heights={{ default: '36px' }} />\n        </MastheadLogo>\n      </MastheadBrand>\n    </MastheadMain>\n    <MastheadContent>\n      <span>Content</span>\n    </MastheadContent>\n  </Masthead>\n);\n","title":"Custom logo component","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In addition to being able to pass a string to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`component`}
+        </code>
+        {` property of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`MastheadLogo`}
+        </code>
+        {`, you can provide more fine-tuned customization by passing a callback that returns a component.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`To maintain proper layout and formatting, a `}
+      <code {...{"className":"ws-code "}}>
+        {`<Masthead>`}
+      </code>
+      {` should contain both a `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadMain>`}
+      </code>
+      {` and `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadContent>`}
+      </code>
+      {` component.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Mastheads contain the `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadMain>`}
+      </code>
+      {` that wraps a `}
+      <code {...{"className":"ws-code "}}>
+        {`<PageToggleButton>`}
+      </code>
+      {` and `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadBrand>`}
+      </code>
+      {`. The `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadBrand>`}
+      </code>
+      {` wraps `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadLogo>`}
+      </code>
+      {`. The masthead also contains the page's header toolbar within `}
+      <code {...{"className":"ws-code "}}>
+        {`<MastheadContent>`}
+      </code>
+      {`.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Basic with mixed content"])}
+    {React.createElement(pageData.examples["Display inline"])}
+    {React.createElement(pageData.examples["Display stack"])}
+    {React.createElement(pageData.examples["Display stack, display inline responsive"])}
+    {React.createElement(pageData.examples["Inset"])}
+    {React.createElement(pageData.examples["Custom logo component"])}
+    <AutoLinkHeader {...{"id":"using-router-links","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Using router links`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Router links can be used for in-app linking in React environments to prevent page reloading. To use a `}
+      <code {...{"className":"ws-code "}}>
+        {`Link`}
+      </code>
+      {` component from a router package, you can follow our `}
+      <PatternflyThemeLink {...{"to":"#custom-logo-component","className":""}}>
+        {`custom logo component example`}
+      </PatternflyThemeLink>
+      {` and pass a callback to the `}
+      <code {...{"className":"ws-code "}}>
+        {`component`}
+      </code>
+      {` property of the `}
+      <code {...{"className":"ws-code "}}>
+        {`MastheadLogo`}
+      </code>
+      {`:`}
+    </p>
+    <Example {...{"code":"<MastheadLogo component={(props) => <Link {...props} to=\"#\" />}>\n  <Brand ...brandProps />\n</MastheadLogo>","lang":"nolive","className":""}}>
+    </Example>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMastheadReactDocs';
+Component.pageData = pageData;
+
+export default Component;