{"id":936588,"date":"2025-06-23T02:38:38","date_gmt":"2025-06-23T02:38:38","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=936588"},"modified":"2025-06-23T02:38:38","modified_gmt":"2025-06-23T02:38:38","slug":"header-with-search-and-buttons","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/header-with-search-and-buttons\/","title":{"rendered":"Header with search and buttons"},"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-7032d7c3ec321c2f665d474d9cf38ef4 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\">Click Me<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":17695593,"parent":0,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"Header, Header with Search, header with button, search","wpop_description":"A responsive header layout featuring two main columns. On the left, it includes the site logo and navigation menu. On the right, there's a search bar followed by an action button perfect for creating a clean, functional top bar for any modern website.","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","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-936588","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\">Click Me<\/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\/936588","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":27,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/936588\/revisions"}],"predecessor-version":[{"id":936648,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/936588\/revisions\/936648"}],"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=936588"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=936588"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=936588"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=936588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}