EN
React - navbar with flexbox
5
points
In this article, we would like to show you how to create navbar with flexbox in React.
In below example, we create a simple Navbar component as a flex container with four flex items (children).
Navbar container uses (navbarStyle):
display: flexstyle which enables a flex context for all its direct children,position: fixedwith coordinates set to0makes element stretched and located always on the top of the webpage.
Children properties:
flex: 1style determines how much of the available space each flexible element will occupy (in our case thespacerwill occupy as much space as possible, stretching elements to the sides),flex: nonestyle makes item width fit to content.
Runnable example:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
const navbarStyle = {
position: 'fixed',
top: '0',
left: '0',
right: '0',
display: 'flex' // <---------- required
}
const sideMenuStyle = {
padding: '5px',
background: '#aacdd2',
flex: 'none'
}
const linksStyle = {
padding: '5px',
background: '#ddf9c4',
flex: 'none'
}
const linkStyle = {
padding: '0 5px'
}
const spacerStyle = {
background: '#fff9c4',
flex: '1' // <----------------- to fill empty navbar space
}
const userMenuStyle = {
padding: '5px',
background: '#bbdefb',
flex: 'none'
}
const Navbar = () => {
return (
<div style={navbarStyle}>
<div style={sideMenuStyle}>
<button>Menu</button>
</div>
<div style={linksStyle}>
<a style={linkStyle} href='#'>Home</a>
<a style={linkStyle} href='#'>Gallery</a>
<a style={linkStyle} href='#'>About</a>
</div>
<div style={spacerStyle}></div>
<div style={userMenuStyle}>
<button>Login</button>
<button>Sign Up</button>
</div>
</div>
);
};
const App = () => {
return (
<div style={{padding: '30px 0 0 0', height: '100px'}}>
<Navbar/>
<div>Place to web page body...</div>
</div>
);
};
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);