SiteBranding

The SiteBranding component wraps its content in a FlexMenuLink component so it can be rendered from menu data passed to a FlexMenu component.

Although it is intended to be used within a FlexMenu component, it may be rendered as a stand alone without the content being wrapped in the FlexMenuLink component by passing in the noLink prop.

SiteBranding

Edit the props to see this component update live!

jsx

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  size="md"
>
  <Box
    sx={{
      display: "flex",
      fontSize: "65px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  size="md"
>
  <Box
    sx={{
      display: "flex",
      fontSize: "65px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

Props

Size

The size prop controls the size of the site name and the slogan. The responsive text sizing for both is set in text-component.js with the following assumptions.

The xs and sm sizes have fixed text size for site name and site slogan. This works well when the Branding component is rendered in a fixed height menu or in the footer.

The md and lg sizes work well when deployed in the main section of a single sidebar layout. The md and lg sizes also work well when the branding is stacked.

The xl size works well when the Branding component spreads across the entire a page width.

Stack

Prop: stack

jsx

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  size="sm"
  stack
>
  <Box
    sx={{
      display: "flex",
      fontSize: "80px",
      marginBottom: "-12px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

Center

Prop: center

jsx

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  size="sm"
  stack
  center
>
  <Box
    sx={{
      display: "flex",
      justifyContent: "center",
      fontSize: "80px",
      marginBottom: "-12px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

hideSlogan

If you want to hide the slogan but have it rendered off-screen for accessibility.

Prop: center

jsx

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  hideSlogan
  size="sm"
  stack
  center
>
  <Box
    sx={{
      display: "flex",
      justifyContent: "center",
      fontSize: "80px",
      marginBottom: "-12px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

hideName

If you want to hide the site name but have it rendered off-screen for accessibility.

If you want to render just the site logo without the site name or site slogan rendered off-screen just use the SiteLogo component.

Prop: center

jsx

<SiteBranding
  item={{
    label: "Used Car Shop",
    url: "/documentation/site-branding",
  }}
  siteName="Used Car Shop"
  siteSlogan="Used cars at knock down prices!"
  hideName
  hideSlogan
  size="sm"
  stack
  center
>
  <Box
    sx={{
      display: "flex",
      justifyContent: "center",
      fontSize: "80px",
      marginBottom: "-12px",
    }}
  >
    <AiFillCar />
  </Box>
</SiteBranding>

noLink

To remove the link that wraps the branding content use the noLink prop