Ecommerce Navbar 4 block design & features
The navbar puts the logo, four menu triggers, a wide search field and account, wishlist and cart icon buttons in one row. It is built with shadcn/ui using Navigation Menu, Tabs, Carousel and Sheet.
Opening Shop shows a full-width panel with a scrollable row of department tabs. Each department lists popular links in large type, two columns of grouped links and a promo card with a photo. Deals shows a carousel of image tiles with labels instead. Clicking the search field dims the page and opens a list of suggested searches. The menu data, including departments, promos and carousels, and the logo are props, while the search suggestions live in a constant.
Below the extra large breakpoint the menus collapse into a menu icon that opens a sheet. The sheet has icon tabs for each menu along the bottom, a list of departments that drill into their links with a back button, and collapsible link groups.