Pattern Paste
Subscribe

6 layout options10 Styled looksNo plugin needed

WordPress header patterns

Copy a WordPress site header into the Gutenberg editor: the name, a menu and one action, built from core navigation blocks for your block theme.

16 layout options shown

Showing 1–16 of 16

Live preview at its actual size. Scroll to explore the whole section.

Explore pattern

Nav bar rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav bar

A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar.

HeaderPreview pattern
Nav menu rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav menu

The header that drives a real menu: your site logo and name at the left, your WordPress navigation menu standing against a full-height currentColor hairline, and a search field with a visible label behind it.

HeaderPreview pattern
Nav stack rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav stack

A header built as a masthead rather than an app bar: a micro-row of tracked uppercase meta (address, hours, telephone) sits over a hairline, and under it the main row carries the wordmark, your WordPress menu and one filled action over a 3px rule.

HeaderPreview pattern
Header station board rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Header station board

A compact wordmark and broad destination links turn the header into a typographic signboard, with a separate address and opening-hours rail.

HeaderPreview pattern
Nav utility bar rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav utility bar

A local-business header in two bands: a thin reversed strip across the top carries a tap-to-call telephone number, the opening hours and the area served, and under it the bar holds the name, your WordPress menu and one Book online button over a hairline.

HeaderPreview pattern
Header wayfinding plaque rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Header wayfinding plaque

A projecting nameplate beside two stacked routes: the visitor menu above a ruled contact and booking rail.

HeaderPreview pattern

Choose a layout for your page

Pick a bar for a short menu and a stacked header when the site has many places to go. The menu is a core Navigation block, so it reads your own menu.

New to patterns? Learn how to copy and paste a pattern. Read how we test patterns.

All Core Patterns