Trying to figure out what this is called and how to make it in react. (nav bar?)

[QQ_cazo]

first off, images/videos of what im talking about
https://imgur.com/a/oIRQL8P

 

 

 

 

 

ive been looking for almost a week on what this is called, i want to say its an overflow menu but when i search for it, always comes up as "off screen menu".. i just want the tab part itself, not it loading a full element

 

 

[masayaShinoda17]

hi that's just a navbar. The "off screen menu" can be achieved with just regular HTML CSS, there is no need to use any React specific methods like hooks etc... If you are not familiar with CSS media queries, I would suggest you put aside React for now and focus on practicing regular HTML CSS & JS first (apologies if this sounds rude its just an assumption I have from reading your post).

If achieving this is not a hurry thing and is a learning experience, please try using CSS media queries:

.navbar .item {
	display: hidden;
}
@media screen and (min-width: 480px) {
	.navbar .item {
		display: block;
    }
}

In the above snippet, all elements that are children of navbar with class `item` will be hidden unless the device or web browser is at least 480px wide.

If it's urgent for a work project I'd be happy to quickly write the code to help you out. Let me know if you have any further questions.

[QQ_cazo]

1 hour ago, masayaShinoda17 said:

hi that's just a navbar. The "off screen menu" can be achieved with just regular HTML CSS, there is no need to use any React specific methods like hooks etc... If you are not familiar with CSS media queries, I would suggest you put aside React for now and focus on practicing regular HTML CSS & JS first (apologies if this sounds rude its just an assumption I have from reading your post).

If achieving this is not a hurry thing and is a learning experience, please try using CSS media queries:

.navbar .item {
	display: hidden;
}
@media screen and (min-width: 480px) {
	.navbar .item {
		display: block;
    }
}

In the above snippet, all elements that are children of navbar with class `item` will be hidden unless the device or web browser is at least 480px wide.

If it's urgent for a work project I'd be happy to quickly write the code to help you out. Let me know if you have any further questions.

its kind of urgent, ive been told i cannot use any CSS queries, and must make it dynmiclly set the buttons (i.e. fill the 100% width, then when window is resized, remove buttons until not overflowing, and show 3 dots)

is there any react npm package i can use?

[wasab]

You still need to figoure out how what size the current screen is and what the cutoff width is. You can either create your own hook for this or use the hooks from react-responsive packages. 

 

https://stackoverflow.com/questions/44480053/how-to-detect-if-screen-size-has-changed-to-mobile-in-react

 

So something like this (following the solutions from the stackoverflow)

const isMobile = useMediaQuery({ query: `(max-width: 760px)` });

return isMobile ? <MobileNav /> : <DesktopNav />

 

Edited February 19 by wasab
Typos