Nav utility bar, Pattern Paste Canonical: https://patternpaste.com/pattern/nav-utility-bar.html Core Patterns (https://patternpaste.com/patterns/) Header (https://patternpaste.com/patterns/nav/) Free Standard # 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. The strip is the one inverted thing on the page, so the facts a caller needs are read before the menu is. On a phone the menu folds to a button and the strip wraps to a short stack. States no colour and no font of its own. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The number, in the button's label and its tel: link. - The hours and the area. Keep each to one short line. - The name and the menu. Select the navigation block, then Menu. - The button's label and link. "Get a quote" suits a trade. The signature moment ## The reversed strip The signature is one inverted band, thin, over a bar that is not. The strip is a full-bleed slab of your contrast with your base on it, about 44px tall, the only reversed thing on the page, so the telephone number reads before the name does. That is inversion and proportion, not decoration, so it survives colourlessness. It is what separates this header from nav-stack, which puts the same kind of facts in a quiet micro-row over a hairline, and from nav-bar, which has no facts at all. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your menu. - Your button. ### Set by this pattern - The name is on the ladder. - A 44px call target. - Labels keep their own size. - Both bands bleed; both inners hold 1240px - 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 header a local business actually needs: before the menu, the three things a caller wants, which are the number, when you are open and whether you come to them. A thin reversed strip carries those across the top; under it the bar holds the name, your menu and one Book online button over a hairline. ### The signature moment: the reversed strip The signature is one inverted band, thin, over a bar that is not. The strip is a full-bleed slab of your contrast with your base on it, about 44px tall, the only reversed thing on the page, so the telephone number reads before the name does. That is inversion and proportion, not decoration, so it survives colourlessness. It is what separates this header from nav-stack, which puts the same kind of facts in a quiet micro-row over a hairline, and from nav-bar, which has no facts at all. Make it yoursVariations and the edits to make first ### What to change first - The number, in the button's label and its tel: link. - The hours and the area. Keep each to one short line. - The name and the menu. Select the navigation block, then Menu. - The button's label and link. "Get a quote" suits a trade. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No family is stated in the base. - Your colours. The bar asks for base and contrast; the strip inverts them. Each chain falls back to white or black, so neither band can blank. Text on the strip is base on contrast, the pair every theme keeps apart. - Your menu. The links are a core/navigation block with overlayMenu: mobile, so the bar shows your site's menu and folds to core's menu button on a phone. Its colour asks for role-link, then contrast. - Your button. Book online states no colour, so your theme's button paints it. ### What it decides for itself - The name is on the ladder. It is a heading on large, not x-large, because its job is hierarchy under the strip, and at 390 the name, the menu button and Book online must share one line. - A 44px call target. The number is a transparent core button linking to tel:, with 0.75rem above and below, so it is a full-size tap target on a phone, never a bare inline link. The hours and the area are plain text. - Labels keep their own size. The strip is set at clamp(0.9375rem, 0.9vw, 1rem), never the small preset, which is 13px in a theme with no scale. - Both bands bleed; both inners hold 1240px, so the strip's facts line up with the name and the button beneath them. - At 390 the strip wraps to the number on one line and the hours and the area under it, and the bar stays one line. Technical notesBlock mechanics, responsive behaviour and constraints ### Styled look: Frost and spruce A clinic header that brings its own colours and face: a #f4f7f6 frost ground with #16302b ink; the strip, the hairline and a pill Book online button in #2e6b5e spruce with frost type; Gill Sans falling to Calibri and Trebuchet throughout. The navigation block states its overlay colours, so the phone menu opens on frost. Frost on spruce measures 5.8:1. ### Notes - Core blocks only: group, heading, paragraph, navigation, buttons, button. - Every base colour is a fallback chain ending on a core-guaranteed colour; the hairline is currentColor. - No text sits on an accent rung in the base. Questions ## Nav utility bar: common questions Does Nav utility bar need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading, navigation and paragraph), so it pastes into the block editor with nothing to install. Will Nav utility bar match my theme? Choose by variation. Reversed strip takes your theme’s palette; Frost and spruce brings its own colours. How many variations does Nav utility bar have? 2: Reversed strip and Frost and spruce. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Nav utility bar free? Yes. It is one of 56 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. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Page header Page header cover strip An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph. The photograph stays dominant on wide screens; on a phone the title strip reads first. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/page-header-cover-strip.html)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html) #### Before you paste Requires a block theme on WordPress 7.0. 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Header Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, navigation, paragraph Presets color 5, font-size 2, spacing 3 WordPress 7.0+ Continue exploring ## Next in Header Explore all 4 Header patterns (https://patternpaste.com/patterns/nav/) Shot in Twenty Twenty-Five Header No 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. Header Preview pattern (https://patternpaste.com/pattern/nav-stack.html) Shot in Twenty Twenty-Five Header No 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. Header Preview pattern (https://patternpaste.com/pattern/nav-bar.html) Shot in Twenty Twenty-Five Header No 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. Header Preview pattern (https://patternpaste.com/pattern/nav-menu.html)