A responsive header made in React.js, with a dropdown menu for small screens.
Visit it : https://cookedideas-responsive-header.netlify.app/
Responsive :
- big screen → navigation links displayed in center
- small screen → only a burger menu, unfolding dropdown menu on click
Animated :
- dropdown menu folding/unfolding
- burger button : from burger to close icon, from close icon to burger
Dropdown menu folds on link click, on page scroll and on page click.
Links data from a js array (src/assets/navlinks.js)
Header states and functions in src/Layout.jsx, so no need for context provider or redux store.
- React powered by Vite
- TailwindCss
- Styled Components
- react-router and react-router-dom
Download zip or clone repo and...
npm i
npm run devHappy coding ;)