Scribd
Upload
7 views

Navbar

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Navbar

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Navbar:

import React from 'react';


import ReactDOM from 'react-dom';

// NavigationBar Component
const NavigationBar = () => {
return (
<nav style={styles.navbar}>
<a href="#home" style={styles.link}>Home</a>
<a href="#about" style={styles.link}>About</a>
<a href="#projects" style={styles.link}>Projects</a>
<a href="#contact" style={styles.link}>Contact</a>
</nav>
);
};

// App Component
const App = () => {
return (
<div>
<NavigationBar />
<div style={styles.content}>
<h1>Welcome to My Website</h1>
<p>This is a simple personal site with a custom navigation bar!</p>
</div>
</div>
);
};

// Styling Object
const styles = {
navbar: {
display: 'flex',
justifyContent: 'center',
backgroundColor: '#333',
padding: '10px',
position: 'sticky',
top: 0,
zIndex: 1000,
},
link: {
color: '#fff',
textDecoration: 'none',
margin: '0 15px',
fontSize: '16px',
},
content: {
textAlign: 'center',
marginTop: '20px',
padding: '10px',
},
};

// Render App
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

You might also like