Best header blocks 2026: 18 verified sections

A header is the page masthead: it says where you are, what you can do there and how to get back. The catalogue indexes 18 of them from 4 registries, measured on 1 November 2026, which makes this one of the smallest categories, so read the table as an inventory rather than a ranking.

Header failures are geometric. When the header is sticky and the page has anchor links, the section title lands underneath the bar: you need a scroll-margin-top equal to the header height, and that height changes as soon as the title wraps. When the breadcrumb is long, the last element is clipped at 360px and the visitor loses their position. When a sidebar shares the screen, the header must align with its inset, otherwise the title drifts 16px away from the content.

Page masthead or navigation bar

The two categories overlap because publishers use the word header for navigation bars too. The useful distinction is in the content: a header carries a title, breadcrumb, search and page actions; a navbar carries the global links and the mobile menu. If you want the second, the right list is the navbar one; mixing them leads to installing a global bar inside an application screen where it has no job.

27 files and a single npm dependency

The 18 blocks add up to 27 files, which is 1.5 per section, and exactly one npm dependency across the whole group. Registry dependencies reach 25: almost all the weight sits in shadcn components a typical project already has, button, separator, breadcrumb, dropdown, so the cost is not installation but fitting the three-slot structure: what sits left, what sits centre, what sits right. A header with more files usually has its state variants already written.

• File count: a two or three-file header already separates the mobile and desktop variants.
• Registry dependencies: breadcrumb and dropdown are components you must have, not packages to add.
• Block name: “Header Demo” is a demo wrapper, not a section to paste.
• Publisher: half the rows come from sv-blocks, so the variants are close relatives.

The table, sorted by files

The Registry column weighs more than usual: 9 rows out of 18 come from sv-blocks and are variations on one drawing, so the table measures one supplier’s depth more than catalogue variety. The three efferd rows are instead the same header in three configurations, useful for seeing which slots change without touching the markup.

The three tests

Test one: open the preview at 360px and watch the breadcrumb; a clipped last element means the header cannot hold long titles. Test two: zoom to 200% and check that the actions do not overlap the title. Test three: open a dialog from the page and confirm the header does not sit above the overlay, the classic z-index bug when the bar is position sticky with a high value.

• scroll-margin-top equal to the measured header height, never a guessed number.
• The breadcrumb has a non-clickable final item and an accessible label.
• Actions stay reachable from the keyboard and show a focus ring.
• The header never covers the first heading when a page opens from an anchor.

curl "https://ui.eneawork.it/api/blocks/category/header?limit=10"

The limit: two rows are demos

“Header Demo” from systaliko is the wrapper that mounts the component, not the section; “Sticky header” from flx is a dialog that simulated a sticky header. Both stay in the list because the title contains the word header and the manifest declares no categories: the derivation is transparent, but across 18 rows two are noise, which is 11% of the category.

Decision rule

If the page lives inside a shell with a sidebar, take a three-slot header and align it to the sidebar inset: the title must start on the same vertical as the content. If the page is marketing, a header with a breadcrumb and a single action works better. The alternative is having no header at all: on documentation pages the title can live in the content and the global bar is enough, which buys vertical space on mobile and removes one anchor-covering problem.

The mastheads live under /blocks/category/header, the inventory under /blocks, and the efferd header-1 has its page here. For page structure read how to structure a layout, for the navigation path accessible breadcrumb, and for copied blocks against headless components copy-paste versus headless.