Here are the steps to create a custom navigation menu in React with Sass.
Step 1: Install React and other CSS modules
We will create a React.js project with TypeScript using Vite.
npm create vite@latest sass-app -- --template react-ts
Our application name is sass-app.
Go inside that folder and open it using Visual Studio Code.
cd sass-app
Install the package dependencies using this command:
npm install
Open the package.json file, and you can see the current version of React.js.
You need to install the Sass module. To do so, type the following command.
npm install -D sass
Step 2: Create a Navbar Component
Create a new folder called shared and a new file called Navbar.tsx inside the src folder.
Add the code below inside the Navbar.tsx file:
import './Navbar.scss'; function Navbar() { return ( <nav className="navbar"> <ul className="nav-links"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/services">Services</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> ); } export default Navbar;
Step 3: Create a Sass or Scss file
Create a new Navbar.scss file inside the src folder and remove the App.css file.
You can also rename the App.css file to a Navbar.scss file. The choice is yours.
Add the below code inside the Navbar.scss file:
.navbar { background-color: #333; color: white; padding: 1rem; .nav-links { list-style: none; display: flex; justify-content: space-around; li { padding: 0.5rem; a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s; &:hover { color: #ff6347; } } } } }
These are some of the colors that we will use in the component Navbar.
Now, import the Navbar.tsx file inside the App.tsx file:
import Navbar from './Navbar'; function App() { return ( <div style={{marginLeft: 200}}> <Navbar /> <main> <h1>Welcome to My Website</h1> </main> </div> ); } export default App;
Here is our main.tsx file:
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode>, )
Save this file, go to the browser, and go to this URL: http://localhost:5173/
This is the basic navigation powered by Sass in React.js.