In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a website responsive is navigation. It requires an extra time and attention to make it happen. The get start how to build third level navigation with responsive that supports across all browers.<\/p>\n
\nproject-folder\n css\n style.css\n bootstrap.css\n js\n bootstrap.js\n custom.js\n jquery.js\n\n index.html\n<\/code><\/pre>\nHow to build third level nagigation with responsive<\/h2>\n
Create a file name index.html<\/code> inside any new folder or where ever you want to use it. Copy the below code into your index.html<\/p>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<title>Navigation Third level with responsive<\/title>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"css\/bootstrap.css\" rel='stylesheet' type='text\/css'>\n<link href=\"css\/style.css\" rel='stylesheet' type='text\/css'>\n<\/head>\n<body>\n<div class=\"menus_item\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"main-menu\">\n<div class=\"navbar-header\">\n<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\n<span class=\"sr-only\">Toggle navigation<\/span>\n<span class=\"icon-bar\"><\/span>\n<span class=\"icon-bar\"><\/span>\n<span class=\"icon-bar\"><\/span>\n<\/button>\n<\/div>\n<div id=\"navbar\" class=\"collapse navbar-collapse\">\n<div class=\"menu-wcmenu-container\">\n<ul id=\"menu-wcmenu\" class=\"nav-menu\">\n<li class=\"menu-item menu-item-has-children\">\n<a href=\"#\"> Home<\/a>\n<ul class=\"sub-menu\">\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\">\n<a href=\"#\"> Testi Home<\/a>\n<ul class=\"sub-menu\">\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-has-children\">\n<a href=\"#\">About<\/a>\n<ul class=\"sub-menu\">\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-has-children\">\n<a href=\"#\"> Testimonial<\/a>\n<ul class=\"sub-menu\">\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item menu-item-has-children\">\n<a href=\"#\"> Testi sub<\/a>\n<ul class=\"sub-menu\">\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<li class=\"menu-item\"><a href=\"#\"> Lorem ipsum<\/a><\/li>\n<\/ul>\n<\/div> <!-- \/.menu-wcmenu-container -->\n<\/div><!--\/.nav-collapse -->\n<\/div><!-- \/.main-menu -->\n<\/div><!-- \/.col-md-12 -->\n<\/div><!-- \/.row -->\n<\/div> <!-- \/.container -->\n<\/div><!-- \/.menus_item -->\n\n<script src=\"js\/input\/jquery.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"js\/bootstrap.js\" type=\"text\/javascript\"><\/script>\n<script src=\"js\/custom.js\" type=\"text\/javascript\"><\/script>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\nNote: For demo purpose I have added all the required doctype and script line along with the head.<\/p>\n
Now for css create a new file called style.css<\/code> inside the css folder<\/p>\n\n.main-menu ul {\ntext-align:center;\nfloat:right;\nmargin:0;\npadding:0;\n}\n\n.main-menu li {\nlist-style:none;\nfloat:left;\nborder-left:1px solid #efefef;\n}\n\n.main-menu a {\nfont-family:'Open Sans', sans-serif;\nfont-size:14px;\ncolor:#fff;\ntext-transform:uppercase;\nline-height:50px;\ndisplay:block;\n-webkit-transition:all ease .3s;\n-o-transition:all ease .3s;\ntransition:all ease .3s;\npadding:0 15px;\n}\n\n.main-menu a:hover {\ntext-decoration:none;\ncolor:#FFF;\nbackground:#057893;\n}\n\n.main-menu li:last-child {\nborder-right:1px solid #efefef;\n}\n\n.nav-menu>li {\nposition:relative;\n}\n\n.nav-menu>li:hover a {\nbackground:#057893;\n}\n\n.nav-menu>li:hover .sub-menu {\ndisplay:block;\nwidth:300px;\n}\n\n.nav-menu>li:hover .sub-menu li {\ndisplay:block;\nwidth:100%;\nborder:0;\nborder-bottom:1px solid #ddd;\n}\n\n.nav-menu>li:hover .sub-menu li:hover a {\nbackground:#055B6F;\n}\n\n.nav-menu>li:hover .sub-menu li .sub-menu a {\nline-height:32px;\n}\n\n.nav-menu>li:hover .sub-menu li a {\nline-height:40px;\ndisplay:block;\nwidth:100%;\ntext-align:left;\npadding:0 5px;\n}\n\n.sub-menu {\nposition:absolute;\ntop:100%;\nz-index:3;\nbackground:#057893;\ndisplay:none;\n}\n\n#main-header {\npadding-top:15px;\n}\n\n.menus_item {\nborder-top:1px solid #EEE9D6;\nmargin-top:15px;\nbackground:#0795B6;\nborder-bottom:5px solid #efefef;\n}\n\n.main-menu {\nwidth:100%;\nfloat:left;\n}\n\n.navbar-toggle .icon-bar {\nbackground:#fff;\n}\n\n.navbar-toggle {\nborder:1px solid #fff;\n-moz-border-radius:3px;\n-webkit-border-radius:3px;\nborder-radius:3px;\n}\n\n.navbar-toggle.collapsed {\nborder-color:transparent;\n}\n\n.main-menu a.parent {\npadding-right:28px;\nposition:relative;\n}\n\n.main-menu a.parent:after {\ncontent:\"\";\nwidth:0;\nheight:0;\nposition:absolute;\ntop:23px;\nright:10px;\nborder-left:5px solid transparent;\nborder-right:5px solid transparent;\nborder-top:5px solid #fff;\n}\n\n@media screen and min-width 1000px{\n.nav-menu>li:hover .sub-menu .sub-menu {\ndisplay:none;\n}\n\n.main-menu .sub-menu a.parent:after {\ntop:15px;\nborder-top:5px solid transparent;\nborder-bottom:5px solid transparent;\nborder-left:5px solid #fff;\n}\n\n.menu-item-has-children>ul.sub-menu li.menu-item-has-children {\nposition:relative;\n}\n\n.menu-item-has-children>ul.sub-menu li.menu-item-has-children .sub-menu {\nposition:absolute;\nleft:300px;\ntop:0;\ndisplay:none;\n}\n\n.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover .sub-menu {\ndisplay:block;\n}\n\n.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover li a:hover {\nbackground:#064959;\n}\n\n.menu-item-has-children>ul.sub-menu li.menu-item-has-children .sub-menu a,.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover li a {\nfont-size:12px;\n}\n}\n\n@media screen and max-width 767px{\n.nav-menu>li:hover .sub-menu li .sub-menu a {\nline-height:40px;\n}\n\n.widget ul.menu li {\nwidth:100%!important;\n}\n\n.nav-menu>li {\nwidth:100%;\nborder-left:0;\nmargin:0;\n}\n\n.nav-menu>li .sub-menu {\nposition:static;\ndisplay:block;\nwidth:100%;\nfloat:left;\nmargin:0;\n}\n\n.nav-menu>li .sub-menu li {\nfloat:left;\nwidth:100%;\ndisplay:block;\nborder:0;\nborder-bottom:1px solid #ddd;\nmargin:0;\n}\n\n.nav-menu>li .sub-menu li a {\nline-height:40px;\ndisplay:block;\nwidth:100%;\ntext-align:left;\npadding:0 5px;\n}\n\n.main-menu a {\ntext-align:left;\nborder-left:0;\n}\n\n.nav-menu>li:hover .sub-menu {\ndisplay:block;\nwidth:100%;\n}\n\n.sub-menu {\nheight:0;\n-moz-transition:all .3s ease;\n-o-transition:all .3s ease;\n-webkit-transition:all .3s ease;\ntransition:all .3s ease;\noverflow:hidden;\n}\n\n.hoverr .parent {\nbackground:#076C84;\n}\n\n.hoverr>.sub-menu {\nheight:auto;\nmax-height:900px;\n}\n\n.hoverr li.hoverr .parent {\nbackground:#055567;\n}\n\n.hoverr li.hoverr>.sub-menu {\nheight:auto;\nmax-height:900px;\nbackground:#055567;\n}\n\n.parent:after {\npadding-right:0;\n}\n\n.main-menu a.parent:after {\ntop:18px;\n}\n\n.nav-menu>li:last-child,.nav-menu>li .sub-menu li:last-child {\nborder-right:0;\n}\n}\n<\/code><\/pre>\nNow JS. Lets create a new file called custom.js<\/code> Paste the below code into custom.js<\/code><\/p>\n\n\nvar ww = document.body.clientWidth;\n$(document).ready(function() {\n $(\".nav-menu li a\").each(function() {\n if ($(this).next().length > 0) {\n $(this).addClass(\"parent\");\n };\n })\n\n adjustMenu();\n});\n\n\n\n$(window).bind('resize orientationchange', function() {\n ww = document.body.clientWidth;\n adjustMenu();\n});\nvar adjustMenu = function() {\n if (ww ').parent().html();\n $(this).siblings('.sub-menu').prepend(s);\n $(\".sub-menu > a\").wrap('<\/code><\/pre>\n\n').removeClass('parent');
\n $(\".unique-mobile-class + .unique-mobile-class\").remove();
\n \/\/ console.log(s);<\/p>\n});
\n $(\".nav-menu li\").unbind('mouseenter mouseleave');
\n $(\".nav-menu li a.parent\").unbind('click').bind('click', function(e) {
\n \/\/ must be attached to anchor element to prevent bubbling
\n e.preventDefault();
\n $(\".unique-mobile-class + .unique-mobile-class\").remove();
\n $(this).parent(\"li\").toggleClass(\"hoverr\");
\n });
\n } else {
\n $(\".nav-menu li\").bind('mouseenter mouseleave');<\/p>\n
$(\".unique-mobile-class\").remove();
\n }<\/p>\n
}
\n<\/code><\/li>\n<\/ul>\n
Note: Javascript must be placed at the footer of the page.
\nThis demo is a modified version of bootstrap navigation and still required the common bootstrap files such as bootstrap.css<\/code> and bootstrap.js<\/code> along with jquery.js<\/code>
\nYou can easily download the complete source code of third level navigation with responsive below.<\/p>\nDownlaod<\/a>
\nDemo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-78","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"\n
Third level navigation with responsive - Santosh Kumar Shah<\/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:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Third level navigation with responsive - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T11:03:56+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/\",\"name\":\"Third level navigation with responsive - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2020-06-30T11:03:56+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Third level navigation with responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Third level navigation with responsive - Santosh Kumar Shah","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:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/","og_locale":"en_US","og_type":"article","og_title":"Third level navigation with responsive - Santosh Kumar Shah","og_description":"In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a […]","og_url":"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T11:03:56+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/","url":"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/","name":"Third level navigation with responsive - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2020-06-30T11:03:56+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/third-level-navigation-with-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Third level navigation with responsive"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}