Pattern Paste
Subscribe

Core Patterns Header

FreeStandard

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.

The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The wordmark. Replace "Hallmere".
  2. The menu. Select the navigation block, then Menu, and point it at yours.
  3. The action's label and link. The button ships without a URL.
  4. The bar's weight. If your theme's face is already heavy, step the wordmark from 800 to 700 rather than making the links smaller: the links are at their floor.

The signature moment

The scale collision on one line

The signature is two type sizes with nothing between them, on the same baseline. The wordmark is a heading on your theme's x-large rung, up to 36px; the links beside it are set at 15px, uppercase, at 0.22em, which is the widest tracking anywhere in this pattern's family. There is no mid-size text on the line to soften the jump, so the eye reads the name as a mark and the links as a legend under a drawing. In a colourless design that jump is the whole of the composition: nothing here is tinted, boxed or shadowed to make it work.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your menu.
  • Your button.

Set by this pattern

  • Full bleed with its own 1240px inner.
  • Compact padding.
  • The 15px floor on the links.
  • The action inverts.
  • How it behaves at 390.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

The bar at the top of a page: the name, four ways through the site, one action, and a hairline under all of it. It is deliberately the shortest section in the catalogue. A header that grows tall stops being a header, so every measurement in it is chosen to keep the bar under about 80px at desktop.

The signature moment: the scale collision on one line

The signature is two type sizes with nothing between them, on the same baseline. The wordmark is a heading on your theme's x-large rung, up to 36px; the links beside it are set at 15px, uppercase, at 0.22em, which is the widest tracking anywhere in this pattern's family. There is no mid-size text on the line to soften the jump, so the eye reads the name as a mark and the links as a legend under a drawing. In a colourless design that jump is the whole of the composition: nothing here is tinted, boxed or shadowed to make it work.

The hairline is the second half of it. It is a 1px currentColor border on the bar itself, not a separator block, so it cannot be narrowed by a theme that restyles separators, and it follows the text colour wherever the theme puts it.

Make it yoursVariations and the edits to make first

What to change first

  1. The wordmark. Replace "Hallmere". It is a heading, so if you have a logo image instead, swap the heading for an image block and keep the row.
  2. The menu. Select the navigation block, then Menu, and point it at yours. Keep the labels to one word each: at 0.22em tracking a two-word label eats the line. Four items is the number this composition is tuned for; five still fits at 1400 and wraps sooner on a laptop.
  3. The action's label and link. The button ships without a URL. Make the label a verb.
  4. The bar's weight. If your theme's face is already heavy, step the wordmark from 800 to 700 rather than making the links smaller: the links are at their floor.

Variations

  • Mark right. The same bar mirrored: links and action first from the left, the wordmark hard against the right edge. One structural change and nothing else; the colours, the type and the hairline are identical to the base.
  • Navy and sky (Styled). Brings its own colours and face for a trades firm or a clinic: #13294b navy ground, #ffffff type, a #bcd7f2 sky hairline and a sky Get a quote button in navy with 4px corners, set in Avenir Next falling to Helvetica and Arial. The navigation block states its overlay colours too, so the phone menu opens navy with white links. Its matching bottom is Footer strip in Navy and sky. Every pair measured at AA on the painted values; the lowest is the button, 9.8:1.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No family is stated anywhere. The collision is built from weight, size and tracking, so it survives a serif theme and a sans one.
  • Your colours. The ground asks for base, the type asks for contrast, and each falls back to a colour WordPress itself guarantees, so the bar cannot blank.
  • Your menu. The links are a core/navigation block, so the bar shows the menu your site has, not four words somebody typed into this file. With no menu assigned core falls back to a list of your pages, which is why the preview shows our sample site's three; pick or create a menu in the editor and every page using this bar follows it. The block asks for your theme's link colour and falls back to contrast, and the hamburger it prints on a phone takes the same ink.
  • Your button. The action is a core button. Its corners are squared here, but its padding rhythm, its hover state and its focus ring are your theme's.

What it decides for itself

  • Full bleed with its own 1240px inner. The bar spans the viewport and holds its content to a measure, which is what makes it a bar rather than a column.
  • Compact padding. clamp(0.875rem, 1.4vw, 1.25rem) top and bottom, stated rather than taken from a spacing preset, because a theme with a generous scale would turn preset 40 into a band. The horizontal padding is the usual clamp(1.25rem, 4vw, 4rem) so the bar's edges line up with the sections under it.
  • The 15px floor on the links. A bare small preset is 13px in a theme with no scale, which is under the readable floor, so the navigation block states max(0.9375rem, 15px) with the weight, tracking and case beside it. Core sets every item at its line-height, so the links are text-height targets on a phone the way every core menu is; on a phone they are behind the menu button anyway.
  • The action inverts. The button takes the contrast ground and base text, so it is the one solid object on the bar and it cannot vanish into it: the two chains are each other's opposites in any theme.
  • How it behaves at 390. The navigation block is set to overlayMenu: mobile, so below 600px core swaps the links for its menu button and the bar stays ONE line: the wordmark at the left, the button and the action together at the right, which is the behaviour a buyer expects of a header. The button opens core's full-screen overlay, white with your links in black, and closes with its own cross or Escape. The right-hand cluster never wraps; the row it sits in still can, so a theme with enormous type drops the cluster under the name rather than off the edge. Measured at 390 in both stock themes: one line, no overflow.
Technical notesBlock mechanics, responsive behaviour and constraints

Notes

  • Core blocks only: group, heading, navigation, buttons, button. No plugin; the menu button is core's own, driven by WordPress's Interactivity API.
  • Every colour is a fallback chain ending on a core-guaranteed colour, and the hairline is currentColor, which cannot resolve to nothing.
  • No text sits on an accent, in any rung. There is no accent in this pattern.

Questions

Nav bar: common questions

Does Nav bar need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading and navigation), so it pastes into the block editor with nothing to install.

Will Nav bar match my theme?

Choose by variation. Name left and Mark right take your theme’s palette; Folio, Mend and Navy and sky bring its own colours.

How many variations does Nav bar have?

5: Name left, Folio, Mark right, Mend and Navy and sky. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Nav bar free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

2,924 bytes 
<!-- wp:group {"align":"full","style":{"border":{"bottom":{"color":"currentColor","width":"1px","style":"solid"}},"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"clamp(0.875rem, 1.4vw, 1.25rem)","bottom":"clamp(0.875rem, 1.4vw, 1.25rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:clamp(0.875rem, 1.4vw, 1.25rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(0.875rem, 1.4vw, 1.25rem);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.875rem","left":"2.5rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.625rem, 2.6vw, 2.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.625rem, 2.6vw, 2.25rem))">Hallmere</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.75rem","left":"1.5rem"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"mobile","style":{"color":{"text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"blockGap":"1.25rem"},"typography":{"fontSize":"max(0.9375rem, 15px)","fontWeight":"500","letterSpacing":"0.22em","textTransform":"uppercase"}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.5rem","left":"0.75rem"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"0.7rem","bottom":"0.7rem","left":"1.15rem","right":"1.15rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:0.7rem;padding-right:1.15rem;padding-bottom:0.7rem;padding-left:1.15rem">Book a call</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Folio
3,817 bytes 
<!-- wp:group {"align":"full","style":{"border":{"bottom":{"color":"#5b5f66","width":"1px","style":"solid"}},"color":{"background":"#efe9df","text":"#141517"},"spacing":{"padding":{"top":"clamp(0.875rem, 1.4vw, 1.25rem)","bottom":"clamp(0.875rem, 1.4vw, 1.25rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="border-bottom-color:#5b5f66;border-bottom-style:solid;border-bottom-width:1px;color:#141517;background-color:#efe9df;padding-top:clamp(0.875rem, 1.4vw, 1.25rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(0.875rem, 1.4vw, 1.25rem);padding-left:clamp(1.25rem, 4vw, 4rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.875rem","left":"2.5rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2vw, 1.75rem)","fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.1"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:#141517;margin-top:0;margin-bottom:0;font-size:clamp(1.375rem, 2vw, 1.75rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.1">Ada Lindqvist</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.75rem","left":"1.75rem"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"mobile","customOverlayBackgroundColor":"#efe9df","customOverlayTextColor":"#141517","style":{"color":{"text":"#141517"},"spacing":{"blockGap":"1.5rem"},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.875rem","fontWeight":"400","letterSpacing":"0.06em","textTransform":"uppercase"}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} -->
<!-- wp:navigation-link {"label":"Work","url":"/work/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About","url":"/about/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Rates","url":"/rates/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Contact","url":"/contact/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.5rem","left":"0.75rem"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#141517","text":"#efe9df"},"border":{"radius":"0px"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"1.375rem","right":"1.375rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"500","letterSpacing":"0"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="/contact/" style="border-radius:0px;color:#efe9df;background-color:#141517;padding-top:0.875rem;padding-right:1.375rem;padding-bottom:0.875rem;padding-left:1.375rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:0">Book a day</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Mark right
2,922 bytes 
<!-- wp:group {"align":"full","style":{"border":{"bottom":{"color":"currentColor","width":"1px","style":"solid"}},"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"clamp(0.875rem, 1.4vw, 1.25rem)","bottom":"clamp(0.875rem, 1.4vw, 1.25rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:clamp(0.875rem, 1.4vw, 1.25rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(0.875rem, 1.4vw, 1.25rem);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.875rem","left":"2.5rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.75rem","left":"1.5rem"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"mobile","style":{"color":{"text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"blockGap":"1.25rem"},"typography":{"fontSize":"max(0.9375rem, 15px)","fontWeight":"500","letterSpacing":"0.22em","textTransform":"uppercase"}},"layout":{"type":"flex","justifyContent":"left","flexWrap":"wrap"}} /-->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.5rem","left":"0.75rem"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"0.7rem","bottom":"0.7rem","left":"1.15rem","right":"1.15rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:0.7rem;padding-right:1.15rem;padding-bottom:0.7rem;padding-left:1.15rem">Book a call</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.625rem, 2.6vw, 2.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.625rem, 2.6vw, 2.25rem))">Hallmere</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Header

Explore all 6 Header patterns

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
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