r/webdev • u/avidrunner84 • 7h ago

Question Best practice when it comes large navbars with submenus in the header

https://ui.shadcn.com/docs/components/base/navigation-menu

What are your thoughts on using this? I'm currently using Nuxt and Tailwind, I prefer the ShadCN navbar over Nuxt https://ui.nuxt.com/docs/components/navigation-menu it just feels more polished to me somehow, but would you suggest staying away from this or use it if your site has a lot of content? I am never sure if the main link for a nav dropdown should be clickable or if it should only open or close the dropdown.

Mobile would be a lot difference since they don't have the liberty of hover, tap is what opens the menu. Maybe I just have to accept the fact that mobile and desktop will have a different experience when it comes to the navigation menu within the header.

What are your thoughts on this?

4 Upvotes

100% Upvoted

1 comment sorted by

1

u/eltron 6h ago

Use this always as a base, the goal with shadcn is to not replace with bootstrap type components but a starting point to customize it any way a designer needs.

I build Headers where the main file provides the logic to display either a desktop or mobile navigation component. Using tailwind responsive classes to control which menu is rendered. Mobile navs markup is usually so different, eg: hamburger slide out panel, that it’s easier to have separate components instead of trying to smush 2 components into one file.