├── .gitignore
├── README.md
├── images
└── project_demo.gif
├── package-lock.json
├── package.json
├── public
├── 404.html
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── components
├── App.js
├── Dropdown.js
├── Header.js
├── Layout.js
├── MenuItems.js
└── Navbar.js
├── index.js
├── menuItems.js
└── routes
├── About.js
├── AboutWho.js
├── Frontend.js
├── Home.js
├── Node.js
├── OurValues.js
├── PHP.js
├── SEO.js
├── Services.js
├── WebDesign.js
└── WebDev.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Creating a multilevel dropdown menu in React
2 |
3 | ## [Live project here](https://ibaslogic.github.io/react-multilevel-dropdown-menu/)
4 |
5 | Read the step-by-step guide here: https://blog.logrocket.com/creating-multilevel-dropdown-menu-react/
6 |
7 | ## Demo here:
8 |
9 | 
10 |
11 | ## Clone project
12 |
13 | You can download or clone this project by running this command from your terminal:
14 |
15 | ```
16 | git clone https://github.com/Ibaslogic/react-multilevel-dropdown-menu
17 | ```
18 |
19 | Then:
20 |
21 | ```
22 | cd react-multilevel-dropdown-menu
23 | npm install
24 | npm start
25 | ```
26 |
27 | You should see the app in your browser address bar at [http://localhost:3000](http://localhost:3000)
28 |
--------------------------------------------------------------------------------
/images/project_demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ibaslogic/react-multilevel-dropdown-menu/bc44c1c234734d84ecee027279d95e600ec79a8d/images/project_demo.gif
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-multilevel-dropdown-menu",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://ibaslogic.github.io/react-multilevel-dropdown-menu",
6 | "dependencies": {
7 | "@testing-library/jest-dom": "^5.16.5",
8 | "@testing-library/react": "^13.3.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.3.0",
13 | "react-scripts": "5.0.1",
14 | "web-vitals": "^2.1.4"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject",
21 | "predeploy": "npm run build",
22 | "deploy": "gh-pages -d build"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | },
42 | "devDependencies": {
43 | "gh-pages": "^4.0.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Single Page Apps for GitHub Pages
6 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ibaslogic/react-multilevel-dropdown-menu/bc44c1c234734d84ecee027279d95e600ec79a8d/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
51 |
52 |
53 |
54 |
55 |
56 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ibaslogic/react-multilevel-dropdown-menu/bc44c1c234734d84ecee027279d95e600ec79a8d/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ibaslogic/react-multilevel-dropdown-menu/bc44c1c234734d84ecee027279d95e600ec79a8d/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: sans-serif;
9 | }
10 |
11 | header {
12 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
13 | color: #212529;
14 | }
15 |
16 | .nav-area {
17 | display: flex;
18 | align-items: center;
19 | max-width: 1200px;
20 | margin: 0 auto;
21 | padding: 10px 20px;
22 | }
23 |
24 | .logo {
25 | text-decoration: none;
26 | font-size: 25px;
27 | color: inherit;
28 | margin-right: 20px;
29 | }
30 |
31 | .menus {
32 | display: flex;
33 | align-items: center;
34 | flex-wrap: wrap;
35 | list-style: none;
36 | }
37 |
38 | .menu-items {
39 | position: relative;
40 | font-size: 14px;
41 | }
42 |
43 | .menu-items a {
44 | display: block;
45 | font-size: inherit;
46 | color: inherit;
47 | text-decoration: none;
48 | }
49 |
50 | .menu-items button {
51 | display: flex;
52 | align-items: center;
53 | color: inherit;
54 | font-size: inherit;
55 | border: none;
56 | background-color: transparent;
57 | cursor: pointer;
58 | width: 100%;
59 | }
60 |
61 | button span {
62 | margin-left: 3px;
63 | }
64 |
65 | .menu-items > a, .menu-items button {
66 | text-align: left;
67 | padding: 0.7rem 1rem;
68 | }
69 |
70 | .menu-items a:hover,
71 | .menu-items button:hover {
72 | background-color: #f2f2f2;
73 | }
74 |
75 | .arrow::after {
76 | content: "";
77 | display: inline-block;
78 | margin-left: 0.28em;
79 | vertical-align: 0.09em;
80 | border-top: 0.42em solid;
81 | border-right: 0.32em solid transparent;
82 | border-left: 0.32em solid transparent;
83 | }
84 |
85 | .dropdown {
86 | position: absolute;
87 | right: 0;
88 | left: auto;
89 | box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08),
90 | 0 4px 6px -2px rgba(71, 63, 79, 0.16);
91 | font-size: 0.875rem;
92 | z-index: 9999;
93 | min-width: 10rem;
94 | padding: 0.5rem 0;
95 | list-style: none;
96 | background-color: #fff;
97 | border-radius: 0.5rem;
98 | display: none;
99 | }
100 |
101 | .dropdown.show {
102 | display: block;
103 | }
104 |
105 | .dropdown .dropdown-submenu {
106 | position: absolute;
107 | left: 100%;
108 | top: -7px;
109 | }
110 |
111 | /* content */
112 |
113 | .content {
114 | max-width: 1200px;
115 | margin: 0 auto;
116 | padding: 3rem 20px;
117 | }
118 |
119 | .content h2 {
120 | margin-bottom: 1rem;
121 | }
122 |
123 | .content a {
124 | color: #cc3852;
125 | margin-right: 10px;
126 | }
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from 'react-router-dom';
2 | import Home from '../routes/Home';
3 | import About from '../routes/About';
4 | import WebDesign from '../routes/WebDesign';
5 | import SEO from '../routes/SEO';
6 | import Services from '../routes/Services';
7 | import Layout from './Layout';
8 | import Frontend from '../routes/Frontend';
9 | import PHP from '../routes/PHP';
10 | import Node from '../routes/Node';
11 | import AboutWho from '../routes/AboutWho';
12 | import OurValues from '../routes/OurValues';
13 | import WebDev from '../routes/WebDev';
14 |
15 | const App = () => {
16 | return (
17 | <>
18 |
19 | }>
20 | } />
21 | } />
22 | } />
23 | } />
24 | } />
25 | } />
26 | } />
27 | } />
28 | } />
29 | } />
30 | } />
31 | Not found!} />
32 |
33 |
34 | >
35 | );
36 | };
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/src/components/Dropdown.js:
--------------------------------------------------------------------------------
1 | import MenuItems from './MenuItems';
2 | const Dropdown = ({ submenus, dropdown, depthLevel }) => {
3 | depthLevel = depthLevel + 1;
4 | const dropdownClass = depthLevel > 1 ? 'dropdown-submenu' : '';
5 | return (
6 |
11 | {submenus.map((submenu, index) => (
12 |
17 | ))}
18 |
19 | );
20 | };
21 |
22 | export default Dropdown;
23 |
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import Navbar from './Navbar';
2 | // ...
3 | import { Link } from 'react-router-dom';
4 |
5 | const Header = () => {
6 | return (
7 |
15 | );
16 | };
17 |
18 | export default Header;
19 |
--------------------------------------------------------------------------------
/src/components/Layout.js:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router-dom';
2 | import Header from './Header';
3 |
4 | const Layout = () => {
5 | return (
6 |
12 | );
13 | };
14 |
15 | export default Layout;
16 |
--------------------------------------------------------------------------------
/src/components/MenuItems.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useRef } from 'react';
2 | import Dropdown from './Dropdown';
3 |
4 | import { Link } from 'react-router-dom';
5 |
6 | const MenuItems = ({ items, depthLevel }) => {
7 | const [dropdown, setDropdown] = useState(false);
8 |
9 | let ref = useRef();
10 |
11 | useEffect(() => {
12 | const handler = (event) => {
13 | if (
14 | dropdown &&
15 | ref.current &&
16 | !ref.current.contains(event.target)
17 | ) {
18 | setDropdown(false);
19 | }
20 | };
21 | document.addEventListener('mousedown', handler);
22 | document.addEventListener('touchstart', handler);
23 | return () => {
24 | // Cleanup the event listener
25 | document.removeEventListener('mousedown', handler);
26 | document.removeEventListener('touchstart', handler);
27 | };
28 | }, [dropdown]);
29 |
30 | const onMouseEnter = () => {
31 | window.innerWidth > 960 && setDropdown(true);
32 | };
33 |
34 | const onMouseLeave = () => {
35 | window.innerWidth > 960 && setDropdown(false);
36 | };
37 |
38 | const closeDropdown = () => {
39 | dropdown && setDropdown(false);
40 | };
41 |
42 | return (
43 |
50 | {items.url && items.submenu ? (
51 | <>
52 |
72 |
77 | >
78 | ) : !items.url && items.submenu ? (
79 | <>
80 |
93 |
98 | >
99 | ) : (
100 | {items.title}
101 | )}
102 |
103 | );
104 | };
105 |
106 | export default MenuItems;
107 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import { menuItems } from '../menuItems';
2 | import MenuItems from './MenuItems';
3 | const Navbar = () => {
4 | return (
5 |
19 | );
20 | };
21 |
22 | export default Navbar;
23 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './components/App';
4 | import { BrowserRouter } from 'react-router-dom';
5 |
6 | // styles
7 | import './App.css';
8 |
9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | root.render(
11 |
12 |
13 |
14 |
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/src/menuItems.js:
--------------------------------------------------------------------------------
1 | export const menuItems = [
2 | {
3 | title: 'Home',
4 | url: '/',
5 | },
6 | {
7 | title: 'Services',
8 | url: '/services',
9 | submenu: [
10 | {
11 | title: 'web design',
12 | url: 'web-design',
13 | },
14 | {
15 | title: 'web development',
16 | url: 'web-dev',
17 | submenu: [
18 | {
19 | title: 'Frontend',
20 | url: 'frontend',
21 | },
22 | {
23 | title: 'Backend',
24 | submenu: [
25 | {
26 | title: 'NodeJS',
27 | url: 'node',
28 | },
29 | {
30 | title: 'PHP',
31 | url: 'php',
32 | },
33 | ],
34 | },
35 | ],
36 | },
37 | {
38 | title: 'SEO',
39 | url: 'seo',
40 | },
41 | ],
42 | },
43 | {
44 | title: 'About',
45 | url: '/about',
46 | submenu: [
47 | {
48 | title: 'Who we are',
49 | url: 'who-we-are',
50 | },
51 | {
52 | title: 'Our values',
53 | url: 'our-values',
54 | },
55 | ],
56 | },
57 | ];
58 |
--------------------------------------------------------------------------------
/src/routes/About.js:
--------------------------------------------------------------------------------
1 | const About = () => {
2 | return About
;
3 | };
4 |
5 | export default About;
6 |
--------------------------------------------------------------------------------
/src/routes/AboutWho.js:
--------------------------------------------------------------------------------
1 | const AboutWho = () => {
2 | return Who we are
;
3 | };
4 |
5 | export default AboutWho;
6 |
--------------------------------------------------------------------------------
/src/routes/Frontend.js:
--------------------------------------------------------------------------------
1 | const Frontend = () => {
2 | return Frontend
;
3 | };
4 |
5 | export default Frontend;
6 |
--------------------------------------------------------------------------------
/src/routes/Home.js:
--------------------------------------------------------------------------------
1 | const Home = () => {
2 | return Home page content
;
3 | };
4 |
5 | export default Home;
6 |
--------------------------------------------------------------------------------
/src/routes/Node.js:
--------------------------------------------------------------------------------
1 | const Node = () => {
2 | return Node
;
3 | };
4 |
5 | export default Node;
6 |
--------------------------------------------------------------------------------
/src/routes/OurValues.js:
--------------------------------------------------------------------------------
1 | const OurValues = () => {
2 | return Our values
;
3 | };
4 |
5 | export default OurValues;
6 |
--------------------------------------------------------------------------------
/src/routes/PHP.js:
--------------------------------------------------------------------------------
1 | const PHP = () => {
2 | return PHP
;
3 | };
4 |
5 | export default PHP;
6 |
--------------------------------------------------------------------------------
/src/routes/SEO.js:
--------------------------------------------------------------------------------
1 | const SEO = () => {
2 | return Search engine optimization
;
3 | };
4 |
5 | export default SEO;
6 |
--------------------------------------------------------------------------------
/src/routes/Services.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 |
3 | const Services = () => {
4 | return (
5 | <>
6 | Services page
7 |
8 | Web design
9 | Seo
10 | >
11 | );
12 | };
13 |
14 | export default Services;
15 |
--------------------------------------------------------------------------------
/src/routes/WebDesign.js:
--------------------------------------------------------------------------------
1 | const WebDesign = () => {
2 | return Web design content
;
3 | };
4 |
5 | export default WebDesign;
6 |
--------------------------------------------------------------------------------
/src/routes/WebDev.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const WebDev = () => {
4 | return Web development content
;
5 | };
6 |
7 | export default WebDev;
8 |
--------------------------------------------------------------------------------