Navigation

Header

Preview

Minerva

AboutDocsExamplesContact

Source

<Flex bg="indigo.800" color="#fff" p={3} alignItems="center"> <Flex fontWeight="bold" color="#fff" m={0} fontSize="xl" mr={3} minWidth="initial" flex="0 0 auto" > Minerva </Flex> <Flex flexGrow={1} flex={1} width="auto" alignItems="stretch" minWidth="initial" overflowX="auto" > <Link display="flex" minWidth="initial" href="#" color="indigo.200" _hover={{ color: '#fff' }} px={1} > About </Link> <Link display="flex" minWidth="initial" href="#" color="indigo.200" _hover={{ color: '#fff' }} px={1} > Docs </Link> <Link display="flex" minWidth="initial" href="#" color="indigo.200" _hover={{ color: '#fff' }} px={1} > Examples </Link> <Link display="flex" minWidth="initial" href="#" color="indigo.200" _hover={{ color: '#fff' }} px={1} > Contact </Link> </Flex> </Flex>

<Flex bg="indigo.800" color="#fff" p={3} alignItems="center">
  <Flex
    fontWeight="bold"
    color="#fff"
    m={0}
    fontSize="xl"
    mr={3}
    minWidth="initial"
    flex="0 0 auto"
  >
    Minerva
  </Flex>
  <Flex
    flexGrow={1}
    flex={1}
    width="auto"
    alignItems="stretch"
    minWidth="initial"
    overflowX="auto"
  >
    <Link
      display="flex"
      minWidth="initial"
      href="#"
      color="indigo.200"
      _hover={{ color: '#fff' }}
      px={1}
    >
      About
    </Link>
    <Link
      display="flex"
      minWidth="initial"
      href="#"
      color="indigo.200"
      _hover={{ color: '#fff' }}
      px={1}
    >
      Docs
    </Link>
    <Link
      display="flex"
      minWidth="initial"
      href="#"
      color="indigo.200"
      _hover={{ color: '#fff' }}
      px={1}
    >
      Examples
    </Link>
    <Link
      display="flex"
      minWidth="initial"
      href="#"
      color="indigo.200"
      _hover={{ color: '#fff' }}
      px={1}
    >
      Contact
    </Link>
  </Flex>
</Flex>

Dashboard Header with Profile Dropdown

Preview

Minerva UI

Source

() => { return ( <Flex bg="indigo.800" color="#fff" px={5} py={3} justifyContent="space-between" alignItems="center" > <Text fontWeight="bold" color="#fff" m={0} fontSize="xl" mr={6}> Minerva UI </Text> <Box> <MenuContainer> <MenuButton p={2} backgroundColor="transparent" border={0} display="flex" alignItems="center" _hover={{ bg: 'indigo.900' }} > <Text color="white">Dave</Text> <Image src="https://tailwindcss.com/img/jonathan.jpg" alt="profile-picture" maxWidth="30px" border="2px solid #fff" borderRadius="full" ml={2} /> </MenuButton> <MenuList menuPosition="right"> <MenuItem onSelect={() => alert('Edit Profile')}> Edit Profile </MenuItem> <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem> <MenuDivider /> <MenuLink href="https://minerva-ui.netlify.com/">Log Out</MenuLink> </MenuList> </MenuContainer> </Box> </Flex> ); }

() => {
  return (
    <Flex
      bg="indigo.800"
      color="#fff"
      px={5}
      py={3}
      justifyContent="space-between"
      alignItems="center"
    >
      <Text fontWeight="bold" color="#fff" m={0} fontSize="xl" mr={6}>
        Minerva UI
      </Text>
      <Box>
        <MenuContainer>
          <MenuButton
            p={2}
            backgroundColor="transparent"
            border={0}
            display="flex"
            alignItems="center"
            _hover={{ bg: 'indigo.900' }}
          >
            <Text color="white">Dave</Text>
            <Image
              src="https://tailwindcss.com/img/jonathan.jpg"
              alt="profile-picture"
              maxWidth="30px"
              border="2px solid #fff"
              borderRadius="full"
              ml={2}
            />
          </MenuButton>
          <MenuList menuPosition="right">
            <MenuItem onSelect={() => alert('Edit Profile')}>
              Edit Profile
            </MenuItem>
            <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem>
            <MenuDivider />
            <MenuLink href="https://minerva-ui.netlify.com/">Log Out</MenuLink>
          </MenuList>
        </MenuContainer>
      </Box>
    </Flex>
  );
}

Mobile Header with Drawer

Preview

Minerva UI

Source

() => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <Flex bg="indigo.800" color="#fff" p={6} justifyContent="space-between" alignItems="center" > <Text fontWeight="bold" color="#fff" m={0} fontSize="xl" mr={6}> Minerva UI </Text> <Box> <Button onClick={onOpen} padding={1} bg="transparent" type="button" border={0} _active={{ bg: 'indigo.900', }} _hover={{ bg: 'indigo.900', }} > <Icon name="menu" size="26px" color="#fff" /> </Button> </Box> <Drawer isOpen={isOpen} onClose={onClose} placement="right" overflow="hidden" > <DrawerHeader onClose={onClose}>Minerva UI</DrawerHeader> <DrawerBody> <Flex justifyContent="flex-start" flexDirection="column" flexGrow={1}> <Link href="#" color="indigo.700" _hover={{ color: 'indigo.800' }} mr={4} > Docs </Link> <Link href="#" color="indigo.700" _hover={{ color: 'indigo.800' }} mr={4} > Examples </Link> <Link href="#" color="indigo.700" _hover={{ color: 'indigo.800' }} mr={4} > Blog </Link> </Flex> </DrawerBody> <DrawerFooter bg="gray.50"> <Flex px={6} py={3} flexDirection={['column', 'row-reverse']} bg="gray.50" radiusBottom="5px" > <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}> Submit </Button> </Flex> </DrawerFooter> </Drawer> </Flex> ); }

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <Flex
      bg="indigo.800"
      color="#fff"
      p={6}
      justifyContent="space-between"
      alignItems="center"
    >
      <Text fontWeight="bold" color="#fff" m={0} fontSize="xl" mr={6}>
        Minerva UI
      </Text>
      <Box>
        <Button
          onClick={onOpen}
          padding={1}
          bg="transparent"
          type="button"
          border={0}
          _active={{
            bg: 'indigo.900',
          }}
          _hover={{
            bg: 'indigo.900',
          }}
        >
          <Icon name="menu" size="26px" color="#fff" />
        </Button>
      </Box>
      <Drawer
        isOpen={isOpen}
        onClose={onClose}
        placement="right"
        overflow="hidden"
      >
        <DrawerHeader onClose={onClose}>Minerva UI</DrawerHeader>
        <DrawerBody>
          <Flex justifyContent="flex-start" flexDirection="column" flexGrow={1}>
            <Link
              href="#"
              color="indigo.700"
              _hover={{ color: 'indigo.800' }}
              mr={4}
            >
              Docs
            </Link>
            <Link
              href="#"
              color="indigo.700"
              _hover={{ color: 'indigo.800' }}
              mr={4}
            >
              Examples
            </Link>
            <Link
              href="#"
              color="indigo.700"
              _hover={{ color: 'indigo.800' }}
              mr={4}
            >
              Blog
            </Link>
          </Flex>
        </DrawerBody>
        <DrawerFooter bg="gray.50">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </DrawerFooter>
      </Drawer>
    </Flex>
  );
}