Breaking News: Grepper is joining You.com. Read the official announcement!

how to create a mobile navigation in react

Shaun Modipane answered on May 10, 2023 Popularity 4/10 Helpfulness 2/10

answer how to create a mobile navigation in react

how to create a mobile navigation in react

Comment

here is the general structure :

{/* mobile navigations */}
<div className="m-3 md:hidden">
	{user ? (
		<div className="">
			<Image
				src={`${user?.photoURL}`}
				alt="user-profile-image"
				width="40"
				height="40"
				className="rounded-full"
				onClick={() => setIsMenuOpen(prev => !prev)}
			/>
			{isMenuOpen && (
				<div
					className="m-3"
					style={{
						width: '100px',
						height: '400px',
						border: '1px solid red',
						position: 'absolute',
						right: '0px',
					}}>
					Menu
				</div>
			)}
		</div>
	) : (
		<button>Sign In</button>
	)}
</div>

here I used a combination of in-line styling and tailwind. Make sure hide the mobile nav for large screen sizes and create a useState that conditionally renders the menu. Note the menu must has absolute position so that to not change the position of other UI

Popularity 4/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript mobile navigation

Link to this answer
Share Copy Link

Contributed on May 10 2023

Shaun Modipane

0 Answers Avg Quality 2/10

how to create a mobile navigation in react

Contents

More Related Answers

how to create a mobile navigation in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.