{"id":950404,"date":"2025-06-23T02:38:38","date_gmt":"2025-06-23T02:38:38","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/header-with-search-and-buttons-nl_nl_formal\/"},"modified":"2026-04-19T19:05:03","modified_gmt":"2026-04-19T19:05:03","slug":"header-with-search-and-buttons-nl_nl_formal","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/header-with-search-and-buttons-nl_nl_formal\/","title":{"rendered":"Header met zoekfunctie en knoppen"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-light-grey-2-color has-text-color has-link-color wp-elements-ff75d96f68191c62d006403e7dea124a is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-group has-light-grey-2-color has-text-color has-link-color wp-elements-1889c56af3e84d64dacff68f7724d1ce is-nowrap is-layout-flex wp-container-core-group-is-layout-0e47273b wp-block-group-is-layout-flex\"><div class=\"is-default-size wp-block-site-logo\"><span class=\"custom-logo-link\"><img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/wmark.png\" class=\"custom-logo\" alt=\"Site logo\"><\/span><\/div>\n\n<nav class=\"is-responsive wp-block-navigation is-layout-flex wp-block-navigation-is-layout-flex\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive wp-block-navigation\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Home<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">About<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Contact<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-group is-content-justification-right is-nowrap is-layout-flex wp-container-core-group-is-layout-19614cab wp-block-group-is-layout-flex\"><form role=\"search\" method=\"get\" action=\"https:\/\/wordpress.org\/patterns\/\" class=\"wp-block-search__button-only wp-block-search__searchfield-hidden wp-block-search__icon-button wp-block-search\" \n\t\t data-wp-interactive=\"core\/search\"\n\t\t data-wp-context='{\"isSearchInputVisible\":false,\"inputId\":\"wp-block-search__input-2\",\"ariaLabelExpanded\":\"Submit Search\",\"ariaLabelCollapsed\":\"Expand search field\"}'\n\t\t data-wp-class--wp-block-search__searchfield-hidden=\"!context.isSearchInputVisible\"\n\t\t data-wp-on--keydown=\"actions.handleSearchKeydown\"\n\t\t data-wp-on--focusout=\"actions.handleSearchFocusout\"\n\t\t><label class=\"wp-block-search__label screen-reader-text\" for=\"wp-block-search__input-2\" >Search<\/label><div class=\"wp-block-search__inside-wrapper\" ><input aria-hidden=\"true\" class=\"wp-block-search__input\" data-wp-bind--aria-hidden=\"!context.isSearchInputVisible\" data-wp-bind--tabindex=\"state.tabindex\" id=\"wp-block-search__input-2\" placeholder=\"\"  value=\"\" type=\"search\" name=\"s\" required  style=\"border-radius: 100px\"\/><button  aria-expanded=\"false\"  class=\"wp-block-search__button has-icon wp-element-button\" data-wp-bind--aria-controls=\"state.ariaControls\" data-wp-bind--aria-expanded=\"context.isSearchInputVisible\" data-wp-bind--aria-label=\"state.ariaLabel\" data-wp-bind--type=\"state.type\" data-wp-on--click=\"actions.openSearchInput\"   style=\"border-radius: 100px\"><svg class=\"search-icon\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n\t\t\t\t\t<path d=\"M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z\"><\/path>\n\t\t\t\t<\/svg><\/button><\/div><\/form>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" style=\"border-radius:100px\">Klik mij<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":17695593,"parent":936588,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"header, Header met zoekfunctie, header met knop, zoeken","wpop_description":"Een responsive header lay-out met twee hoofdkolommen. Aan de linkerkant bevat het het site logo en navigatiemenu. Aan de rechterkant is er een zoekbalk gevolgd door een actieknop, perfect voor het cre\u00ebren van een schone, functionele bovenbalk voor elke moderne site.","wpop_viewport_width":1200,"wpop_block_types":[""],"wpop_locale":"nl_NL_formal","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/group,core\/navigation,core\/search,core\/site-logo","footnotes":""},"pattern-categories":[5],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-950404","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-header"],"category_slugs":["header"],"keyword_slugs":[],"pattern_content":"<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column {\"style\":{\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|light-grey-2\"}}}},\"textColor\":\"light-grey-2\"} -->\n<div class=\"wp-block-column has-light-grey-2-color has-text-color has-link-color\"><!-- wp:columns {\"verticalAlignment\":null} -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"66.66%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:group {\"style\":{\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|light-grey-2\"}}}},\"textColor\":\"light-grey-2\",\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\"}} -->\n<div class=\"wp-block-group has-light-grey-2-color has-text-color has-link-color\"><!-- wp:site-logo \/-->\n\n<!-- wp:navigation \/--><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"><!-- wp:group {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"justifyContent\":\"right\"}} -->\n<div class=\"wp-block-group\"><!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"buttonText\":\"Search\",\"buttonPosition\":\"button-only\",\"buttonUseIcon\":true,\"isSearchFieldHidden\":true,\"style\":{\"layout\":{\"selfStretch\":\"fit\",\"flexSize\":null},\"border\":{\"radius\":\"100px\"}}} \/-->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"border\":{\"radius\":\"100px\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" style=\"border-radius:100px\">Klik mij<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->","favorite_count":0,"author_meta":{"name":"Suman Basuli","url":"https:\/\/wordpress.org\/patterns\/author\/txsadhu","avatar":"https:\/\/secure.gravatar.com\/avatar\/0556f0ab7010c76d021102bc6af9f314a1abb4bc228f94d4063c4a6f7c7d23d5?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/950404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/950404\/revisions"}],"predecessor-version":[{"id":953343,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/950404\/revisions\/953343"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/txsadhu"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=950404"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=950404"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=950404"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=950404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}