{"id":37957,"date":"2026-01-19T20:00:55","date_gmt":"2026-01-19T17:00:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/"},"modified":"2026-01-19T20:00:55","modified_gmt":"2026-01-19T17:00:55","slug":"react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/","title":{"rendered":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu"},"content":{"rendered":"<h2>React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu<\/h2>\n<p>Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve ekran alan\u0131n\u0131 verimli kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6zellikle mobil cihazlarda veya s\u0131n\u0131rl\u0131 ekran alan\u0131na sahip masa\u00fcst\u00fc uygulamalar\u0131nda, geleneksel navigasyon men\u00fcleri hantal kalabilir. \u0130\u015fte tam bu noktada &#8220;Offcanvas&#8221; bile\u015fenleri devreye girer. Bu teknik makale, React kullanarak nas\u0131l etkili ve eri\u015filebilir offcanvas yan paneller olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, temelden ileri seviyeye kadar t\u00fcm detaylar\u0131 ele alacakt\u0131r.<\/p>\n<h2>Offcanvas Nedir ve Neden Kullan\u0131l\u0131r?<\/h2>\n<h3>Offcanvas Tan\u0131m\u0131<\/h3>\n<p>Offcanvas, genellikle ekran\u0131n kenar\u0131ndan (sol, sa\u011f, \u00fcst veya alt) kayarak veya a\u00e7\u0131larak ortaya \u00e7\u0131kan, ana i\u00e7eri\u011fi iten veya \u00fczerine bindiren bir kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenidir. Ba\u015flang\u0131\u00e7ta &#8220;ekran d\u0131\u015f\u0131nda&#8221; (off-canvas) bulunur ve bir tetikleyici (genellikle bir d\u00fc\u011fme) ile g\u00f6r\u00fcn\u00fcr hale gelir. Genellikle navigasyon men\u00fcleri, filtre se\u00e7enekleri veya ek bilgiler i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h3>Kullan\u0131m Alanlar\u0131 ve Avantajlar\u0131<\/h3>\n<p>Offcanvas paneller, \u00f6zellikle mobil \u00f6ncelikli tasar\u0131mlarda ve s\u0131n\u0131rl\u0131 ekran alan\u0131na sahip uygulamalarda vazge\u00e7ilmezdir. Temel avantajlar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Alan Tasarru<br \/>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve ekran alan\u0131n\u0131 verimli kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6zellikle mobil cihazlarda v&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-37957","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve ekran alan\u0131n\u0131 verimli kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6zellikle mobil cihazlarda v...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-19T17:00:55+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu\",\"datePublished\":\"2026-01-19T17:00:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\",\"name\":\"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-19T17:00:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/","og_locale":"tr_TR","og_type":"article","og_title":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu","og_description":"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve ekran alan\u0131n\u0131 verimli kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6zellikle mobil cihazlarda v...","og_url":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-19T17:00:55+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu","datePublished":"2026-01-19T17:00:55+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/","url":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/","name":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-19T17:00:55+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-offcanvas-ile-baslangic-yan-paneller-olusturma-kilavuzu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Offcanvas ile Ba\u015flang\u0131\u00e7: Yan Paneller Olu\u015fturma K\u0131lavuzu"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37957"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37957\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}