{"id":226,"date":"2026-11-09T08:22:07","date_gmt":"2026-11-09T08:22:07","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=226"},"modified":"2026-11-09T08:22:10","modified_gmt":"2026-11-09T08:22:10","slug":"8-copy-paste-navigation-snippets-that-make-menus-feel-instant","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/8-copy-paste-navigation-snippets-that-make-menus-feel-instant\/","title":{"rendered":"8 Copy-Paste Navigation Snippets That Make Menus Feel Instant"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  8 Copy-Paste Navigation Snippets That Make Menus Feel Instant\n\n  SEO TITLE (57 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  8 Navigation Menu Snippets: Hamburger, Mega Menu, Sidebar\n\n  SEO DESCRIPTION (155 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  8 free navigation snippets: mobile hamburger menu, mega menu, collapsible sidebar, sticky header, dropdown and breadcrumbs. Preview live and copy the code.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">Navigation is the one part of a site every single visitor touches, yet it&#8217;s usually the part developers rush \u2014 a plain <code>&lt;ul&gt;<\/code>, a media query, done. Below are 8 free navigation snippets you can preview live and copy in seconds: a mobile hamburger menu, a mega menu, a collapsible sidebar, a sticky header, a dropdown, breadcrumbs, a mobile bottom bar, and animated tabs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each one comes with <strong>how the effect actually works<\/strong>, <strong>when to reach for it<\/strong>, and a quick tip for customising or keeping it accessible. Navigation patterns get copy-pasted more than almost anything else in a codebase, so it&#8217;s worth understanding the handful of techniques \u2014 <code>aria-expanded<\/code> toggling, scroll-position detection, layout-shift-free collapsing \u2014 that make the difference between a menu that feels solid and one that feels flaky.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every snippet below is a <strong>live, interactive preview<\/strong> \u2014 click it, resize it, try it right in the article. When you find one you like, hit <strong>View \/ Edit Code<\/strong> to grab the HTML\/CSS\/JS or export it to React, Vue, Angular or Tailwind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What makes navigation feel &#8220;solid&#8221;?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before the snippets, it helps to know what separates a menu that feels reliable from one that feels flaky. Four things matter most:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keyboard and screen-reader parity<\/strong> \u2014 every open\/close state should be reflected in <code>aria-expanded<\/code>, and every interactive item reachable with <code>Tab<\/code> alone.<\/li>\n\n\n\n<li><strong>No layout shift<\/strong> \u2014 sticky headers, sidebars and dropdowns should reserve their space up front so content doesn&#8217;t jump when they appear.<\/li>\n\n\n\n<li><strong>Cheap animation<\/strong> \u2014 transforms and opacity for open\/close transitions, not <code>height<\/code> or <code>top<\/code>, which force the browser to recalculate layout on every frame.<\/li>\n\n\n\n<li><strong>A clear current-state indicator<\/strong> \u2014 the active tab, current breadcrumb, or open menu item should always be visually obvious, not just implied by colour.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep those four in mind as you scroll \u2014 each snippet below leans on one or more of them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Hamburger Nav<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A responsive nav bar that collapses into a hamburger icon on mobile, with the bars morphing into an X and the menu sliding in \u2014 the pattern behind nearly every site&#8217;s mobile header.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/hamburger-nav\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Hamburger Nav \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> a single <code>toggle('open')<\/code> class swap on click drives everything \u2014 CSS handles the rest. The three bars are <code>&lt;span&gt;<\/code> elements rotated and translated into an X with <code>transform<\/code>, and the menu panel transitions in with <code>transform: translateX()<\/code> rather than animating <code>width<\/code> or <code>display<\/code>, so it stays smooth even on low-end phones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> any responsive site&#8217;s mobile header \u2014 marketing pages, blogs, dashboards. <strong>Tip:<\/strong> set <code>aria-expanded<\/code> on the button and move focus into the menu panel when it opens, otherwise keyboard users tab straight past a menu they can&#8217;t see is open.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/hamburger-nav\/\">Hamburger Nav<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Mega Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A full-width dropdown panel with grouped links, icons and a featured column \u2014 the navigation pattern SaaS and e-commerce sites use when one nav item hides dozens of destinations.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/mega-menu\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Mega Menu \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the trigger button carries <code>aria-haspopup<\/code> and <code>aria-expanded<\/code>, and toggling it swaps a class that reveals a full-width panel positioned with <code>position: absolute<\/code> relative to the nav bar (not the trigger), so it spans edge-to-edge. <code>role=\"menubar\"<\/code> and <code>role=\"menuitem\"<\/code> on the structure give screen readers the same mental model as sighted users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> product suites, marketplaces, and any site where &#8220;Products&#8221; or &#8220;Solutions&#8221; needs to fan out into a dozen links. <strong>Tip:<\/strong> close the panel on <code>Escape<\/code> and on click-outside \u2014 mega menus are the single most common place users get &#8220;stuck&#8221; behind an overlay they can&#8217;t dismiss.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mega-menu\/\">Mega Menu<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Collapsible Sidebar Nav<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A dashboard sidebar that collapses to icon-only width with one click, keeping labels accessible via tooltip \u2014 the exact layout behind Notion, Linear and most admin panels.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/sidebar-nav\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Collapsible Sidebar Nav \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the collapse button flips a class on the sidebar that animates its <code>width<\/code> via a CSS transition and simultaneously fades the text labels with <code>opacity<\/code>, so icons stay aligned while labels disappear. <code>aria-expanded<\/code> on the toggle button keeps assistive tech in sync with the visual state.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> dashboards, admin tools, and any app where screen real estate matters more once a user is a returning power user. <strong>Tip:<\/strong> persist the collapsed\/expanded state in <code>localStorage<\/code> so the sidebar doesn&#8217;t reset every time the user reloads the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/sidebar-nav\/\">Collapsible Sidebar Nav<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Sticky Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A header that shrinks and gains a shadow once you scroll past the hero, so navigation stays reachable without permanently eating vertical space.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/sticky-header\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Sticky Header \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> <code>position: sticky<\/code> keeps the header pinned to the top of the viewport with zero JavaScript for the pinning itself. A small scroll listener checks <code>window.scrollY<\/code> against a threshold and toggles a &#8220;scrolled&#8221; class that shrinks the header&#8217;s padding and adds a box-shadow \u2014 both cheap, transform-friendly changes rather than anything that reflows the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> long marketing pages, docs sites, and blogs where users need the nav available at any scroll depth. <strong>Tip:<\/strong> throttle the scroll listener (or use an <code>IntersectionObserver<\/code> on a sentinel element instead) so it doesn&#8217;t fire on every single scroll event.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/sticky-header\/\">Sticky Header<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Dropdown Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A clean account-menu dropdown with icons, a chevron that rotates on open, and a click-outside-to-close behaviour \u2014 the small utility every app header needs at least once.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/dropdown-menu\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Dropdown Menu \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the trigger toggles an <code>open<\/code> class on its parent, which a sibling-selector rule (<code>.dropdown.open .menu<\/code>) uses to reveal the panel with a short <code>opacity<\/code> and <code>transform: translateY()<\/code> transition \u2014 no JavaScript animation library needed. The chevron icon rotates 180\u00b0 using the same class toggle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> account menus, settings menus, and any &#8220;one trigger, a handful of actions&#8221; pattern in an app header. <strong>Tip:<\/strong> add a document-level click listener that closes the menu when the click target is outside it \u2014 without that, dropdowns are the top source of &#8220;stuck open&#8221; bug reports.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/dropdown-menu\/\">Dropdown Menu<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Breadcrumb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A minimal, semantic breadcrumb trail \u2014 the small navigation piece that tells users (and Google) exactly where a page sits in your site hierarchy.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/breadcrumb\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Breadcrumb \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> it&#8217;s an ordered list (<code>&lt;ol&gt;<\/code>) inside a <code>&lt;nav aria-label=\"Breadcrumb\"&gt;<\/code>, with CSS pseudo-elements (<code>::before<\/code>) drawing the separator between items so the markup itself stays clean text and links \u2014 no stray separator characters cluttering a screen reader&#8217;s output. The final item gets <code>aria-current=\"page\"<\/code> instead of a link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> e-commerce category pages, docs, and any deep site structure where users need to jump back up a level. <strong>SEO note:<\/strong> pair the visible trail with <code>BreadcrumbList<\/code> structured data \u2014 that&#8217;s what turns it into the breadcrumb rich result under your listing in Google search.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/breadcrumb\/\">Breadcrumb<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Mobile Bottom Nav<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A fixed, app-style bottom tab bar with an active-state indicator that swaps content panels instantly \u2014 the pattern that makes a mobile web page feel like a native app.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/bottom-nav\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Mobile Bottom Nav \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the bar sits fixed to the viewport bottom with <code>position: fixed<\/code> and a safe-area inset so it clears the home-indicator strip on iOS. Tapping a tab toggles an <code>active<\/code> class on both the tab and its matching content panel, swapping <code>display<\/code> instantly rather than routing to a new page \u2014 the same trick single-page apps use for instant tab switches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> PWAs, mobile-first web apps, and any site that wants its mobile experience to feel closer to a native app than a shrunk desktop layout. <strong>Tip:<\/strong> keep it to four or five tabs max \u2014 past that, thumbs start missing targets and the bar stops feeling instant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/bottom-nav\/\">Mobile Bottom Nav<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Animated Tabs with Indicator<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A tab bar where a highlight pill glides smoothly to the active tab instead of just jumping, plus panel content that crossfades in \u2014 a small detail that makes a tabbed UI feel considerably more polished.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/animated-tabs\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Animated Tabs with Indicator \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> on click, the script reads the clicked tab&#8217;s <code>offsetLeft<\/code> and <code>offsetWidth<\/code> via <code>getBoundingClientRect()<\/code>-style measurement, then applies those values to the indicator element as <code>transform: translateX()<\/code> and <code>width<\/code> with a CSS transition \u2014 so the pill &#8220;travels&#8221; between tabs instead of teleporting. The panel swap uses a short <code>opacity<\/code> crossfade rather than an abrupt cut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> settings pages, product feature tours, and any UI with three to six related views. <strong>Tip:<\/strong> recalculate the indicator&#8217;s position on window resize, not just on click \u2014 otherwise a responsive layout leaves the pill stranded under the wrong tab after the viewport changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/animated-tabs\/\">Animated Tabs with Indicator<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to drop these into your project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every snippet is framework-agnostic, so the workflow is the same wherever you&#8217;re building:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the snippet and hit <strong>View \/ Edit Code<\/strong> to see the HTML, CSS and JS in separate tabs.<\/li>\n\n\n\n<li>Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing <code>&lt;\/body&gt;<\/code> tag.<\/li>\n\n\n\n<li>Prefer a component? Use the one-click <strong>export to React, Vue, Angular or Tailwind<\/strong> and drop the file straight into your app.<\/li>\n\n\n\n<li>Recolour to your brand by editing the accent colour, spacing and font variables at the top of each snippet.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Keep your navigation accessible<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Navigation is the part of a site keyboard and screen-reader users depend on most. Three rules cover almost every case:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Toggle <code>aria-expanded<\/code> on every open\/close trigger \u2014 menus, dropdowns and sidebars all need it to announce their state correctly.<\/li>\n\n\n\n<li>Make sure every menu, dropdown and tab bar is fully operable with <code>Tab<\/code>, <code>Enter<\/code> and <code>Escape<\/code> alone \u2014 mouse-only interactions lock out keyboard users entirely.<\/li>\n\n\n\n<li>Use real landmark elements (<code>&lt;nav&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>role=\"menubar\"<\/code>) so assistive tech can jump straight to navigation instead of reading through it line by line.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thought<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are just 8 of dozens of navigation patterns you can copy for free \u2014 no login, no sign-up, everything runs in your browser. The techniques underneath them \u2014 class-toggled state paired with CSS transitions, scroll-position detection, measured-and-transformed indicators, and semantic landmark markup \u2014 are the same building blocks behind every menu, tab bar and sidebar you&#8217;ll ever build. Learn them once here and you&#8217;ll reach for them on every project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/navigation\/\">webdevpuneet UI Snippets \u2014 Navigation<\/a> \u2014 it&#8217;s free and runs entirely in your browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigation is the one part of a site every single visitor touches, yet it&#8217;s usually the part developers rush \u2014 a plain &lt;ul&gt;, a media query, done. Below are 8 free navigation snippets you can preview live and copy in seconds: a mobile hamburger menu, a mega menu, a collapsible sidebar, a sticky header, a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"8 free navigation snippets: mobile hamburger menu, mega menu, collapsible sidebar, sticky header, dropdown and breadcrumbs. Preview live and copy the code.","jetpack_seo_html_title":"8 Navigation Menu Snippets: Hamburger, Mega Menu, Sidebar","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"8 free navigation snippets for your next project: mobile hamburger menus, mega menus, collapsible sidebars, sticky headers, dropdowns and breadcrumbs.\n\nPreview live and copy the code.\n\n#WebDesign #CSS #FrontendDevelopment","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[14],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-snippets","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-3E","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/11\/navigation-snippets-header-1200w.jpg?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions\/228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}