FlexMenuLink

The FlexMenuLink component is meant to be used in flex wrapper components such as FlexMenu and SiteBranding.

The FlexMenuLink component receives the justify and expand props from a wrapper component and these are provided to the calculateLinkPadding function. This allows links in flex wrapper components to space and align in an appropriate manner.

Use the Link component is this functionality is not required.

FlexMenuLink @"src/components/FlexMenuLink"

Edit the props to see this component update live!

jsx

<Box bg="chrome" sx={{ fontSize: "36px" }}>
  <FlexMenuLink
    variant="chrome"
    noExternalLinkIcon
    item={{ url: "https://www.google.com" }}
  >
    <BsFillCartCheckFill />
  </FlexMenuLink>
</Box>

<Box bg="chrome" sx={{ fontSize: "36px" }}>
  <FlexMenuLink
    variant="chrome"
    noExternalLinkIcon
    item={{ url: "https://www.google.com" }}
  >
    <BsFillCartCheckFill />
  </FlexMenuLink>
</Box>