# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/nav-bar.html Section: Header Access: Free, and free to keep. Needs: 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. Blocks: button, buttons, group, heading, navigation Keywords: nav, navigation, header, menu, bar, wordmark, hamburger ## Variations (5) ### Name left (the default) Identical markup in every theme. The wordmark left, your menu and the action right, a currentColor hairline under the bar. Your base as the ground, your contrast as the type, the menu in your theme's own link colour, and a menu button on a phone. ### Folio This variation states its own colours and states its own type: identical in every theme. The Folio photographer set: a bone bar over a graphite hairline, Ada Lindqvist in Helvetica, Work, About, Rates and Contact in tracked monospace capitals, and a square darkroom-black Book a day button. ### Mark right Identical markup in every theme. The same bar mirrored: the links and the action read first from the left and the wordmark sits hard against the right edge, the way a colophon does. One structural change, no new colour and no new type. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: a deep teal bar edged in apricot with the name in clinical white, Treatments, Team and Book, and a white 6px-corner call button, all in Avenir Next. ### Navy and sky This variation states its own colours and states its own type: identical in every theme. A calm trades and clinic header: a #13294b navy ground with #ffffff type, a #bcd7f2 sky hairline and a sky Get a quote button in navy, set in Avenir Next falling to Helvetica and Arial. Pairs with Footer strip in Navy and sky for a matching top and bottom. --- ## 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. ## 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. ## 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. ## 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.