About this block
A two-row header for sites with a lot to navigate, like online shops and help centers. The top row holds your logo, a search bar and account links, and the second row adds an Explore button that opens a wide menu of grouped links. On phones and tablets it all folds into a menu button that opens a side drawer.
When to use it
- Your site has more pages than fit in a single row of links.
- Visitors often search for what they want, like products, articles or help topics.
- You sell online and want account, saved items and cart in reach on every page.
- You want one header that works on desktop and phones without building two.
What's inside
- A top row with a logo slot, a search bar with a category picker and Search button, and Saved, Account and cart buttons.
- An Account menu with a Sign in button, a create-account link, and links to orders and saved items.
- An Explore menu that opens a full-width panel with three headed link columns (Shop, Learn, Support) and a promo card. It opens on hover, or on click or tap, and closes when you move away or click elsewhere.
- 5 main links on the right of the second row.
- Below desktop width, a menu button opens a drawer from the right with search, links and a Sign in button. It closes with the close button, a tap outside it, the Escape key, or when a link is tapped.
How to customize it
- Replace the wordmark with your business name, or put your logo Image in the logo slot. The logo links to your home page.
- Point the search form at your own search page. It sends visitors to /search with what they typed in the address, like /search?q=mugs.
- Rename the link columns in the Explore panel to match your sections, and point every link at your own pages.
- If you don't sell online, delete the cart button, the Saved link and the account menu, and keep the search and menus.
Questions
- What is a mega menu?
- A dropdown that opens into a wide panel with several columns of grouped links, instead of a short single list. It lets visitors see your whole site structure at once, which helps on sites with many pages.
- Do mega menus work on phones?
- Wide panels don't fit on small screens, so this header swaps them for a side drawer below desktop width. Put your most important pages in the drawer's link list.
- Can I make the header stick to the top when people scroll?
- Yes. Add the sticky and top-0 classes to the header. It already sits above page content, so menus and the drawer stay on top while it's pinned.