Navigation component

[wcastand]

Feature request 🚀

i couldn't find a navigation component or example. A Navbar with eventually some mobile design would be nice or an example to show how to use what's already there to do it with next.js or something like react-router maybe or "vanilla".

Expected:

• A basic navigation component, follow Vercel's design as much as possible.
• Component for mobile too (hamburger menu or other solutions)
• Component drove by useNavigation hooks (If we find a use for it like triggering the panel in mobile for example).

Examples:

Programme:

Others:

[unix]

Can you give more examples or other similar components? (Nav components are really what we lack, I am inverstigating such components.)

[wcastand]

Most nav are similar but there is different complexity. Not sure this is what you are looking for but lib using tailwind has some good nav components. Bootstrap, antd, etc all have example of nav design but most of them are not doing the mobile nav as a hamburger menu apparently ( maybe too complex to implement and too specific for each site/app).

something quite simple like tailblock nav in the header section could be a good start.

or the one in tailwind ui : here my company paid for it and there are good ones which basically on a mobile create a hamburger menu.

[justmelnyc]

A good start could be to recreate the Vercel Navigation, it's a combination of an a and with a 2 line hamburger on mobile. somehow make tabs work with routing without users having to implement the routing manual maybe.

[unix]

This component looks great, but they're hard to abstract. They are more like an abstraction based on business logic, not the basic component unit. (In short, the granularity is too large)

For example, Breadcrumbs can meet the needs of more users, the Header or Navigation is a little fuzzy, users will need many different features, but there is no intersection between functions:

• Navigation or Header components can be large because they need to satisfy as many functions as possible, and it's going to get bigger and bigger. This makes components less usable.

• This kind of components has no basic function, they are combination of other components.

So, I don't think we should leave everything to the component library, maybe a collection repo named zeit-ui-admin can solve these problems. Just like tailblocks, we offer some solutions in another repo, they are a collection of components with a higher level of abstraction, all users can use these sinppets to do their works.

[unix]

So, my thoughts are as follows:

1. We can provide basic component similar to Breadcrumbs, but higher level component cannot.
2. We can provide another repo to show the compose components, and common code snippets.

[wcastand]

I like the idea of a repo with example of complex system, like Navigation headers, etc like what tailblock or tailwind ui are doing works great and let you adapt to your use case.

[unix]

I add Breadcrumbs component on #253 as a supplement to Navigation.

[wcastand]

For the repo, you think it should be part of zeit-ui org. or a completely separate repo?

[unix]

@wcastand
I think it should be part of zeit-ui org, but if someone else builds an extra repo, that's good too.
Sounds like you want to build this repo? If so, I will give you permission when you have a minimum version available. (😄 Or you just want a repo of your own?) Want to know more about your ideas.

[wcastand]

i was mostly looking for how you want to handle it :)
i don't mind starting the repo but not sure what we would want in it except a nav basically right now and that seems a bit short for a repo/website x)

Also don't really want to maintain it by myself mostly because like i said, not sure what should be in it x). Most of it is already in the current website/docs.

Could it make more sense to add a section to the curent website with those complex components?
Makes kind of more sense to me instead of creating a new place to look for those. especially since i don't think there is that many stuff we want to add there at least for now.

What do you think?

[unix]

Agreed with your point, but I have some considerations:

For me, I want to differentiate between components lib and best practices. for example, Popover is a basic component, but Nav is a best practices. User install and use component lib, but the best practices only provide code snippets. I want to use another website to show examples that are not easy to abstract, like:

• Header, sticky header, double height header, header with dropdown menus...
• Footer, fixed footer, full footer...
• Sign in templates
• Complex form layout...

Or it's more appropriate to call them templates, these templates are a combination of one or more components, users can copy code directly to solve similar functions. I don't want to add there examples to the current document site, this makes the document site seem out of focus, but I think it's good plan to add links like material-ui.

Reference sites:

• pro.ant
• antd admin
• element-ui-admin
• material-ui-templates
• tailblocks

[unix]

Transfer to #262 , If anyone wants to discuss it, please reopen it.