Navbars
Centered links
import {
Box,
Flex,
HStack,
Button,
Text,
Link,
Menu,
MenuButton,
MenuList,
MenuItem,
Stack,
Icon,
IconButton,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose } from 'react-icons/ai';
import { BiChevronDown } from 'react-icons/bi';
import { RiFlashlightFill } from 'react-icons/ri';
const navLinks = [
{ name: 'About', path: '#' },
{ name: 'Features', path: '#' },
{ name: 'Pricing', path: '#' }
];
const dropdownLinks = [
{
name: 'Blog',
path: '#'
},
{
name: 'Documentation',
path: '#'
},
{
name: 'Github Repo',
path: '#'
}
];
export default function Navbar() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box px={4} bg={useColorModeValue('white', 'gray.800')}>
<Flex h={16} alignItems="center" justifyContent="space-between" mx="auto">
<Icon as={RiFlashlightFill} h={8} w={8} />
<HStack spacing={8} alignItems="center">
<HStack as="nav" spacing={6} d={{ base: 'none', md: 'flex' }} alignItems="center">
{navLinks.map((link, index) => (
<NavLink key={index} {...link} onClose={onClose} />
))}
{/* Dropdown Menu */}
<Menu autoSelect={false} isLazy>
{({ isOpen, onClose }) => (
<>
<MenuButton _hover={{ color: 'blue.400' }}>
<Flex alignItems="center">
<Text>Community</Text>
<Icon
as={BiChevronDown}
h={5}
w={5}
ml={1}
transition="all .25s ease-in-out"
transform={isOpen ? 'rotate(180deg)' : ''}
/>
</Flex>
</MenuButton>
<MenuList
zIndex={5}
bg={useColorModeValue('rgb(255, 255, 255)', 'rgb(26, 32, 44)')}
border="none"
boxShadow={useColorModeValue(
'2px 4px 6px 2px rgba(160, 174, 192, 0.6)',
'2px 4px 6px 2px rgba(9, 17, 28, 0.6)'
)}
>
{dropdownLinks.map((link, index) => (
<MenuLink key={index} name={link.name} path={link.path} onClose={onClose} />
))}
</MenuList>
</>
)}
</Menu>
</HStack>
</HStack>
<Button colorScheme="blue" size="md" rounded="md" d={{ base: 'none', md: 'block' }}>
Sign in
</Button>
<IconButton
size="md"
icon={isOpen ? <AiOutlineClose /> : <GiHamburgerMenu />}
aria-label="Open Menu"
d={{ base: 'inherit', md: 'none' }}
onClick={isOpen ? onClose : onOpen}
/>
</Flex>
{/* Mobile Screen Links */}
{isOpen ? (
<Box pb={4} d={{ base: 'inherit', md: 'none' }}>
<Stack as="nav" spacing={2}>
{navLinks.map((link, index) => (
<NavLink key={index} {...link} onClose={onClose} />
))}
<Text fontWeight="semibold" color="gray.500">
Community
</Text>
<Stack pl={2} spacing={1} mt={'0 !important'}>
{dropdownLinks.map((link, index) => (
<NavLink key={index} {...link} onClose={onClose} />
))}
</Stack>
</Stack>
</Box>
) : null}
</Box>
);
}
// NavLink Component
interface NavLinkProps {
name: string;
path: string;
onClose: () => void;
}
const NavLink = ({ name, path, onClose }: NavLinkProps) => {
return (
<Link
href={path}
lineHeight="inherit"
_hover={{
textDecoration: 'none',
color: useColorModeValue('blue.500', 'blue.200')
}}
onClick={() => onClose()}
>
{name}
</Link>
);
};
// Dropdown MenuLink Component
interface MenuLinkProps {
name: string;
path: string;
onClose: () => void;
}
const MenuLink = ({ name, path, onClose }: MenuLinkProps) => {
return (
<Link href={path} onClick={() => onClose()}>
<MenuItem _hover={{ color: 'blue.400', bg: useColorModeValue('gray.200', 'gray.700') }}>
<Text>{name}</Text>
</MenuItem>
</Link>
);
};
Simple one
import React from 'react';
import {
Link,
Box,
Flex,
Stack,
HStack,
Heading,
Container,
Icon,
Text,
IconButton,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
import DropDownMenu from './dropDownMenu';
// Here we have used react-icons package for the icons
import { GoChevronLeft, GoChevronRight } from 'react-icons/go';
import { FaGithub } from 'react-icons/fa';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose } from 'react-icons/ai';
const GITHUB_REPO_LINK = 'https://github.com/MA-Ahmad/templateskart';
const menuData = [
{
id: 1,
label: 'ProjectsKart',
subLabel: 'Responsive Projects',
href: '#'
},
{
id: 2,
label: 'ComponentsKart',
subLabel: 'Responsive Components',
href: '#'
}
];
export default function TopNav() {
const { isOpen, onOpen, onClose } = useDisclosure();
const linkColor = 'cyan.400';
return (
<>
<Box
as="header"
bg={useColorModeValue('white', 'gray.800')}
px={4}
boxShadow={useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.9)'
)}
position="fixed"
width="100%"
zIndex="55"
top="0"
>
<Container maxW="1280px" p={{ base: 0, md: 'inherit' }}>
<Flex h={16} alignItems="center" justifyContent="space-between" mx="auto">
<HStack spacing={3} alignItems="center">
<IconButton
size="md"
icon={isOpen ? <AiOutlineClose /> : <GiHamburgerMenu />}
aria-label="Open Menu"
d={{ base: 'inherit', sm: 'none' }}
onClick={isOpen ? onClose : onOpen}
/>
<Link href="#">
<Heading as="h1" fontSize={['lg', 'md', 'xl', '3xl']} cursor="pointer">
<Flex position="relative">
<Icon
position="relative"
as={GoChevronLeft}
transform="rotate(-15deg)"
w={7}
h={7}
color={linkColor}
top={1}
/>
<HStack d={{ base: 'none', sm: 'flex' }} spacing={2}>
<Text textShadow="1px 2px #179c40">
Templates{' '}
<Box
as="span"
position="relative"
_before={{
content: '""',
bg: linkColor,
position: 'absolute',
top: '-0.15rem',
right: '-0.15rem',
bottom: '-0.15rem',
left: '-0.15rem',
transform: 'rotate(-4deg)'
}}
>
<Box
as="span"
textShadow="1px 2px #179c40"
color={useColorModeValue('white', 'black')}
position="relative"
>
Kart
</Box>
</Box>
</Text>
</HStack>
<Icon
position="relative"
as={GoChevronRight}
transform="rotate(-15deg)"
w={7}
h={7}
color={linkColor}
bottom={1}
/>
</Flex>
</Heading>
</Link>
<DropDownMenu menuData={menuData} />
</HStack>
<HStack spacing={2} alignItems="center">
<Link href={GITHUB_REPO_LINK} isExternal>
<Flex
as="button"
p="0.6rem"
rounded="lg"
cursor="pointer"
_hover={{ bg: useColorModeValue('gray.300', 'gray.600') }}
bg={useColorModeValue('gray.200', 'gray.700')}
justifyContent="center"
>
<Icon as={FaGithub} color={linkColor} />
</Flex>
</Link>
</HStack>
</Flex>
</Container>
{isOpen ? (
<Box pb={4} d={{ base: 'inherit', sm: 'none' }}>
<Stack as="nav" spacing={1}>
{menuData.map((data, index) => (
<Link
key={index}
href={data.href}
px={3}
py={1}
lineHeight="inherit"
rounded="md"
_hover={{
textDecoration: 'none',
bg: useColorModeValue('gray.100', 'gray.900')
}}
onClick={() => onClose()}
>
{data.label}
</Link>
))}
</Stack>
</Box>
) : null}
</Box>
</>
);
}
import {
Stack,
Box,
Popover,
Link,
Text,
Icon,
HStack,
PopoverTrigger,
PopoverContent,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaChevronDown } from 'react-icons/fa';
interface MenuData {
id: number;
label: string;
subLabel: string;
href: string;
linkColor?: string;
}
interface MenuDataProps {
menuData: MenuData[];
}
const DropDownMenu = ({ menuData }: MenuDataProps) => {
const linkColor = 'cyan.400';
const { onOpen, onClose, isOpen } = useDisclosure();
return (
<Stack direction="row" spacing={4} d={{ base: 'none', sm: 'flex' }}>
<Popover trigger="hover" placement="bottom-start" onOpen={onOpen} onClose={onClose}>
<PopoverTrigger>
<HStack alignItems="center" cursor="pointer" role="group">
<Link
href="#"
p={2}
fontSize={{ sm: 'md', md: 'lg' }}
fontWeight="bold"
color={useColorModeValue('gray.600', 'gray.200')}
_groupHover={{
color: linkColor
}}
>
Templates
</Link>
<Icon
as={FaChevronDown}
h={4}
w={4}
_groupHover={{
color: linkColor
}}
transition="all .25s ease-in-out"
transform={isOpen ? 'rotate(180deg)' : ''}
/>
</HStack>
</PopoverTrigger>
<PopoverContent
border={0}
boxShadow={useColorModeValue(
'2px 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.9)'
)}
bg={useColorModeValue('white', 'gray.800')}
p={4}
rounded="lg"
minW="xs"
>
<Stack>
{menuData.map((data) => (
<DropDownItem key={data.id} linkColor={linkColor} {...data} />
))}
</Stack>
</PopoverContent>
</Popover>
</Stack>
);
};
const DropDownItem = ({ label, href, subLabel, linkColor }: MenuData) => {
return (
<Link
href={href!}
display="block"
p={2}
rounded="md"
_hover={{ bg: useColorModeValue('gray.100', 'gray.900'), color: linkColor }}
>
<Stack direction="row" align="center">
<Box>
<Text fontWeight={500}>{label}</Text>
<Text fontSize="sm">{subLabel}</Text>
</Box>
</Stack>
</Link>
);
};
export default DropDownMenu;
With multiple links
import {
Box,
Flex,
Avatar,
HStack,
Button,
Text,
Link,
Menu,
MenuButton,
MenuList,
MenuItem,
Stack,
Icon,
IconButton,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose, AiTwotoneThunderbolt } from 'react-icons/ai';
import { BiChevronDown } from 'react-icons/bi';
import { MdTimeline } from 'react-icons/md';
import { BsBook } from 'react-icons/bs';
import { FiSun } from 'react-icons/fi';
import { IconType } from 'react-icons';
const navLinks = [
{ name: 'About', path: '#' },
{ name: 'Blog', path: '#' },
{ name: 'Features', path: '#' }
];
const dropdownLinks = [
{
name: 'Projects',
path: '#',
icon: MdTimeline
},
{
name: 'Tech Stack',
path: '#',
icon: AiTwotoneThunderbolt
},
{
name: 'Open Source',
path: '#',
icon: BsBook
}
];
export default function Navbar() {
const { isOpen, onOpen, onClose } = useDisclosure();
const menuProps = {
bg: useColorModeValue('gray.200', 'gray.700'),
color: useColorModeValue('blue.500', 'blue.200')
};
return (
<Box px={4} boxShadow="lg" width="100%">
<Flex h={16} alignItems="center" justifyContent="space-between" maxW={800} mx="auto">
<IconButton
size="md"
icon={isOpen ? <AiOutlineClose /> : <GiHamburgerMenu />}
aria-label="Open Menu"
display={['inherit', 'inherit', 'none']}
onClick={isOpen ? onClose : onOpen}
/>
<HStack spacing={8} alignItems="center">
<Avatar
href="#"
as={Link}
size="sm"
showBorder={true}
borderColor="blue.400"
rounded="full"
src="https://avatars2.githubusercontent.com/u/37842853?v=4"
/>
<HStack as="nav" spacing={1} display={{ base: 'none', md: 'flex' }} alignItems="center">
{navLinks.map((link, index) => (
<NavLink key={index} {...link} onClose={onClose} />
))}
{/* Dropdown Menu */}
<Menu autoSelect={false} isLazy>
{({ isOpen, onClose }) => (
<>
<MenuButton
as={Button}
variant="ghost"
size="sm"
px={3}
py={1}
lineHeight="inherit"
fontSize="1em"
fontWeight="normal"
rounded="md"
height="auto"
_hover={{ color: 'blue.400', bg: menuProps.bg }}
>
<Flex alignItems="center">
<Text>Links</Text>
<Icon
as={BiChevronDown}
h={5}
w={5}
ml={1}
transition="all .25s ease-in-out"
transform={isOpen ? 'rotate(180deg)' : ''}
/>
</Flex>
</MenuButton>
<MenuList
zIndex={5}
bg={useColorModeValue('rgb(255, 255, 255)', 'rgb(26, 32, 44)')}
border="none"
boxShadow={useColorModeValue(
'2px 4px 6px 2px rgba(160, 174, 192, 0.6)',
'2px 4px 6px 2px rgba(9, 17, 28, 0.6)'
)}
>
{dropdownLinks.map((link, index) => (
<MenuLink
key={index}
name={link.name}
path={link.path}
icon={link.icon}
onClose={onClose}
/>
))}
</MenuList>
</>
)}
</Menu>
</HStack>
</HStack>
<IconButton aria-label="Color Switcher" icon={<FiSun />} />
</Flex>
{/* Mobile Screen Links */}
{isOpen ? (
<Box pb={4} display={['inherit', 'inherit', 'none']}>
<Stack as="nav" spacing={2}>
{navLinks.map((link, index) => (
<NavLink key={index} {...link} onClose={onClose} />
))}
</Stack>
</Box>
) : null}
</Box>
);
}
// NavLink Component
interface NavLinkProps {
name: string;
path: string;
onClose: () => void;
}
const NavLink = ({ name, path, onClose }: NavLinkProps) => {
const link = {
bg: useColorModeValue('gray.200', 'gray.700'),
color: useColorModeValue('blue.500', 'blue.200')
};
return (
<Link
href={path}
px={3}
py={1}
lineHeight="inherit"
rounded="md"
_hover={{
textDecoration: 'none',
bg: link.bg,
color: link.color
}}
onClick={() => onClose()}
>
{name}
</Link>
);
};
// Dropdown MenuLink Component
interface MenuLinkProps {
name: string;
path: string;
icon: IconType;
onClose: () => void;
}
const MenuLink = ({ name, path, icon, onClose }: MenuLinkProps) => {
return (
<Link href={path} onClick={() => onClose()}>
<MenuItem _hover={{ color: 'blue.400', bg: useColorModeValue('gray.200', 'gray.700') }}>
<HStack>
<Icon as={icon} size={18} color="blue.400" />
<Text>{name}</Text>
</HStack>
</MenuItem>
</Link>
);
};
With search field
import {
Container,
Box,
Avatar,
Button,
HStack,
VStack,
Image,
Input,
Spacer,
Menu,
MenuButton,
MenuList,
MenuItem,
Text,
Link,
MenuDivider,
useColorModeValue
} from '@chakra-ui/react';
import { ReactNode } from 'react';
type IconButtonProps = {
children: ReactNode;
};
const IconButton = ({ children }: IconButtonProps) => {
return (
<Button
padding="0.4rem"
width="auto"
height="auto"
borderRadius="100%"
bg="transparent"
_hover={{ bg: '#f6f6f6' }}
>
{children}
</Button>
);
};
const Navbar = () => {
return (
<Box
py="2"
boxShadow="sm"
border="0 solid #e5e7eb"
position="fixed"
top="0"
bg={useColorModeValue('gray.100', 'gray.700')}
width="100%"
zIndex="1"
>
<Container maxW="1280px" px={4} mx="auto">
<HStack spacing={4}>
<Image
alt="dev logo"
w={'auto'}
h={12}
src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png"
/>
<Input
maxW="26rem"
placeholder="Search..."
borderColor={useColorModeValue('gray.300', 'white')}
borderRadius="5px"
d={{ base: 'none', md: 'block' }}
/>
<Spacer />
<HStack spacing={3}>
<Button color="#fff" rounded="md" bg="#3b49df" _hover={{ bg: '#323ebe' }}>
Create a post
</Button>
<IconButton>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
role="img"
aria-labelledby="ap1tc5wqdskeg9i5jtulggx2n8axe0vz"
>
<title id="ap1tc5wqdskeg9i5jtulggx2n8axe0vz">Notifications</title>
<path d="M20 17h2v2H2v-2h2v-7a8 8 0 1116 0v7zm-2 0v-7a6 6 0 10-12 0v7h12zm-9 4h6v2H9v-2z"></path>
</svg>
</IconButton>
<Menu isLazy>
<MenuButton as={Button} size="sm" px={0} py={0} rounded="full">
<Avatar size="sm" src={'https://avatars2.githubusercontent.com/u/37842853?v=4'} />
</MenuButton>
<MenuList
zIndex={5}
border="2px solid"
borderColor={useColorModeValue('gray.700', 'gray.100')}
boxShadow="4px 4px 0"
>
<Link href="https://dev.to/m_ahmad" _hover={{ textDecoration: 'none' }} isExternal>
<MenuItem>
<VStack justifyContent="start" alignItems="left">
<Text fontWeight="500">Muhammad Ahmad</Text>
<Text size="sm" color="gray.500" mt="0 !important">
@m_ahmad
</Text>
</VStack>
</MenuItem>
</Link>
<MenuDivider />
<MenuItem>
<Text fontWeight="500">Dashboard</Text>
</MenuItem>
<MenuItem>
<Text fontWeight="500">Create Post</Text>
</MenuItem>
<MenuItem>
<Text fontWeight="500">Reading List</Text>
</MenuItem>
<MenuItem>
<Text fontWeight="500">Settings</Text>
</MenuItem>
<MenuDivider />
<MenuItem>
<Text fontWeight="500">Sign Out</Text>
</MenuItem>
</MenuList>
</Menu>
</HStack>
</HStack>
</Container>
</Box>
);
};
export default Navbar;
With gradient
import * as React from 'react';
import {
Container,
Box,
Text,
Flex,
Spacer,
Heading,
Menu,
MenuItem,
MenuDivider,
MenuButton,
IconButton,
MenuList,
HStack,
Button,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
import Link from 'next/link';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
// Here we have used react-icons package for the icons
import { MdAdd } from 'react-icons/md';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineArrowRight } from 'react-icons/ai';
import { FiSun } from 'react-icons/fi';
const Navbar = () => {
const { onOpen } = useDisclosure();
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<Flex mb="30px" align="center">
<HStack>
<Link href="#" passHref>
<Box p="2">
<motion.div whileHover={{ scale: 1.1 }}>
<Heading
as="h1"
fontSize={{ base: '2xl', sm: '3xl' }}
bgGradient="linear(to-l, #7928CA,#FF0080)"
bgClip="text"
_focus={{ boxShadow: 'none', outline: 'none' }}
_hover={{
textDecoration: 'none',
bgGradient: 'linear(to-r, red.500, yellow.500)'
}}
>
Notebook App
</Heading>
</motion.div>
</Box>
</Link>
</HStack>
<Spacer />
<Box>
<HStack>
<HStack d={['none', 'none', 'block']}>
<Button
leftIcon={<MdAdd />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: 'linear(to-r, red.500, yellow.500)' }}
color="white"
variant="solid"
size="sm"
rounded="md"
>
Add new note
</Button>
<Button
leftIcon={<AiOutlineArrowRight />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: 'linear(to-r, red.500, yellow.500)' }}
color="white"
variant="solid"
size="sm"
rounded="md"
>
Open source
</Button>
</HStack>
<Box d={['block', 'block', 'none']}>
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<GiHamburgerMenu />}
transition="all 0.2s"
size="md"
color="white"
variant="outline"
bg={useColorModeValue('gray.400', 'gray.800')}
_hover={{ bg: 'auto' }}
_focus={{ boxShadow: 'outline' }}
/>
<MenuList fontSize="sm" zIndex={5}>
<MenuItem icon={<MdAdd />} onClick={onOpen}>
{' '}
<Text textShadow="1px 1px #9c1786">Add new note</Text>
</MenuItem>
<MenuDivider />
<MenuItem icon={<AiOutlineArrowRight />}>
{' '}
<Text textShadow="1px 1px #9c1786">Open source repositories</Text>
</MenuItem>
</MenuList>
</Menu>
</Box>
<IconButton aria-label="Color Switcher" icon={<FiSun />} />
</HStack>
</Box>
</Flex>
</Container>
);
};
export default Navbar;
