Nav menu: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/nav-menu.html Core Patterns (https://patternpaste.com/patterns/) Header (https://patternpaste.com/patterns/nav/) Catalogue access Standard # 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. The menu, the logo and the field are dynamic core blocks, so the bar shows your site's own menu and your own mark; the preview here is sample data. With no menu assigned, core falls back to a list of your pages. On a phone the menu button sits beside the site name on one line. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The menu. Select the block, then Menu, and point it at yours. - The logo. Site Editor, Styles, or the block's own placeholder. - The cell widths. 74/26. - The label and the placeholder. "Search" is the visible caption and "Search this site" is the placeholder; both are block attributes, not content. - The finish. Ship the base on a light page, and nav-ink where the header should sit as a solid band above it. The signature moment ## The only vertical rule in the section A full-height currentColor hairline stands between the site and the search. Every other header in this catalogue rules horizontally, under the bar or between two rows. Here the bar is closed underneath by one hairline and DIVIDED by another, at right angles to it, so the field reads as a separate instrument bolted to the end of the bar rather than as the last item in the menu. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The menu's link colour is your theme's decision and cannot be ours. - The search field and its button are the theme's. ### Set by this pattern - Full bleed with a 1240px measure - The menu stands against the rule. - The field is a field, not an icon. - The field's label is SHOWN, not hidden. 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 first header in the catalogue that drives a real menu. core/navigation, core/site-logo, core/site-title and core/search on one row, in a core/columns inside a full-bleed group. ### The signature moment: the only vertical rule in the section A full-height currentColor hairline stands between the site and the search. Every other header in this catalogue rules horizontally, under the bar or between two rows. Here the bar is closed underneath by one hairline and DIVIDED by another, at right angles to it, so the field reads as a separate instrument bolted to the end of the bar rather than as the last item in the menu. The rest is held to the floor deliberately. Two cells, 74/26: the mark at the left in a tight 18px lockup and the menu standing against the rule at 14px with 0.12em of tracking in the first, the field at 16px in the second. Nothing is decorated, because the composition is the rule. ### Why it is not nav-bar or nav-stack nav-bar is a wordmark against tracked links and one solid button, on one line. nav-stack is a masthead: two rows, two rules of different weights. Both are type somebody typed. This one is distinguished by what it DRIVES: a real core/navigation with real submenus, and a real search field. A buyer who wants a header they can edit as text takes one of those two; a buyer who wants the header WordPress manages takes this. Make it yoursVariations and the edits to make first ### What to change first - The menu. Select the block, then Menu, and point it at yours. - The logo. Site Editor, Styles, or the block's own placeholder. Its width is 40; raise it and the bar grows with it. - The cell widths. 74/26. A menu of seven items or a long site name wants the first cell wider; the field can live with less. - The label and the placeholder. "Search" is the visible caption and "Search this site" is the placeholder; both are block attributes, not content. Keep the caption to one short word: it sits in the narrowest of the three cells. - The finish. Ship the base on a light page, and nav-ink where the header should sit as a solid band above it. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. The bar asks for base and the type for contrast, both ending on a colour WordPress guarantees. Both rules are currentColor. - The menu's link colour is your theme's decision and cannot be ours. Core ships .wp-block-navigation .wp-block-navigation-item__content { color: inherit } at a specificity nothing an inline style can beat, so nav links follow the colour the navigation block inherits. That is why the ink variation works at all: the menu follows the band. - The search field and its button are the theme's. Measured, and worth repeating: stating style.color.text on core/search puts that colour on the SUBMIT BUTTON as well as the input, and Twenty Twenty-Four had already given that button a contrast background. A contrast chain there painted the magnifier the same colour as the button it sits on, ratio 1.0, and nothing warned about it. So this pattern states no colour on the search block, and the field is whatever your theme makes of a form input. ### What it decides for itself - Full bleed with a 1240px measure, and a bar that stays compact: two cells on one row, and the only thing under either of them is the field's own caption. - The menu stands against the rule. The lockup and the menu are the two ends of one row, so the menu reads as belonging to the site and the field, behind the rule, as the instrument bolted to the end of the bar. - The field is a field, not an icon. A 404 can afford a search that is only discovered by clicking; a header cannot. - The field's label is SHOWN, not hidden. core/search always prints a