Top bar
For all product logos, see Logos
For avatar code recipes, see Avatar menu
<Flex as="header" layerStyle="section.topbar" align="center" gap="2"> <Tooltip label="Switch to…"> <IconButton variant="ghost" size="sm" aria-label="Switch to…" icon={ <Icon> <path d={mdiDotsGrid} /> </Icon> } /> </Tooltip> <Link href="#" ml="-1"> <Image alt="Logo" p="1" h="8" w={[8, 8, 'auto']} minW="8" rounded="md" layerStyle="interactive.fill" fit="cover" align="left" src="https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-stream" /> </Link> <ButtonGroup variant="navigation" size="sm" spacing="1"> <Show above="lg"> <Button as="a" href="#" isActive> Nav link </Button> <Button as="a" href="#"> Nav link </Button> <Button as="a" href="#"> Nav link </Button> </Show> <Show below="lg"> <Menu> <MenuButton as={Button} rightIcon={ <Icon layerStyle="menuButtonIcon"> <path d={mdiChevronDown} /> </Icon> } > Menu </MenuButton> <MenuList> <MenuItem as="a" href="#"> Nav link </MenuItem> <MenuItem as="a" href="#"> Nav link </MenuItem> <MenuItem as="a" href="#"> Nav link </MenuItem> </MenuList> </Menu> </Show> </ButtonGroup> <Spacer /> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Help"> <IconButton aria-label="Help" icon={ <Icon> <path d={mdiHelpCircleOutline} /> </Icon> } /> </Tooltip> <Tooltip label="Settings"> <IconButton aria-label="Settings" icon={ <Icon> <path d={mdiCogOutline} /> </Icon> } /> </Tooltip> </ButtonGroup> <Tooltip label="frank.grinaert@sitecore.com"> <Avatar size="sm" name="Frank Grinaert" src="https://s.gravatar.com/avatar/cf6af6596579b7de472a5d8471a45b4f" cursor="pointer" /> </Tooltip> </Flex>