{"id":8497,"date":"2024-01-14T17:51:00","date_gmt":"2024-01-14T17:51:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8497"},"modified":"2024-01-22T15:53:48","modified_gmt":"2024-01-22T10:53:48","slug":"bootstrap-left-slide-menu-with-example","status":"publish","type":"post","link":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/","title":{"rendered":"Bootstrap Left Slide Menu With Example"},"content":{"rendered":"

This Bootstrap code example helps you to create a responsive left slide menu for web applications. It enhances navigation and user experience, making it easier to access different sections of your website. The menu comes with collapsible sections\u00a0for organizing and accessing various sections of your web application effortlessly.<\/p>\n

How to Create Bootstrap Left Slide Menu<\/h2>\n

1. First of all, load the Font Awesome CSS<\/a> (for icons) by adding the following CDN link to the head tag of your website.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.0\/css\/all.min.css'><\/pre>\n
2. After that, copy the following HTML structure and paste it into your HTML file where you want to display the side menu. Customize the menu items and links to match your application’s sections and pages.<\/p>\n
<div class='dashboard'>\r\n    <div class=\"dashboard-nav\">\r\n        <header><a href=\"#!\" class=\"menu-toggle\"><i class=\"fas fa-bars\"><\/i><\/a><a href=\"#\"\r\n                                                                                   class=\"brand-logo\"><i\r\n                class=\"fas fa-anchor\"><\/i> <span>BRAND<\/span><\/a><\/header>\r\n        <nav class=\"dashboard-nav-list\"><a href=\"#\" class=\"dashboard-nav-item\"><i class=\"fas fa-home\"><\/i>\r\n            Home <\/a><a\r\n                href=\"#\" class=\"dashboard-nav-item active\"><i class=\"fas fa-tachometer-alt\"><\/i> dashboard\r\n        <\/a><a\r\n                href=\"#\" class=\"dashboard-nav-item\"><i class=\"fas fa-file-upload\"><\/i> Upload <\/a>\r\n            <div class='dashboard-nav-dropdown'><a href=\"#!\" class=\"dashboard-nav-item dashboard-nav-dropdown-toggle\"><i\r\n                    class=\"fas fa-photo-video\"><\/i> Media <\/a>\r\n                <div class='dashboard-nav-dropdown-menu'><a href=\"#\"\r\n                                                            class=\"dashboard-nav-dropdown-item\">All<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Recent<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Images<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Video<\/a><\/div>\r\n            <\/div>\r\n            <div class='dashboard-nav-dropdown'><a href=\"#!\" class=\"dashboard-nav-item dashboard-nav-dropdown-toggle\"><i\r\n                    class=\"fas fa-users\"><\/i> Users <\/a>\r\n                <div class='dashboard-nav-dropdown-menu'><a href=\"#\"\r\n                                                            class=\"dashboard-nav-dropdown-item\">All<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Subscribed<\/a><a\r\n                        href=\"#\"\r\n                        class=\"dashboard-nav-dropdown-item\">Non-subscribed<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Banned<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">New<\/a><\/div>\r\n            <\/div>\r\n            <div class='dashboard-nav-dropdown'><a href=\"#!\" class=\"dashboard-nav-item dashboard-nav-dropdown-toggle\"><i\r\n                    class=\"fas fa-money-check-alt\"><\/i> Payments <\/a>\r\n                <div class='dashboard-nav-dropdown-menu'><a href=\"#\"\r\n                                                            class=\"dashboard-nav-dropdown-item\">All<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\">Recent<\/a><a\r\n                        href=\"#\" class=\"dashboard-nav-dropdown-item\"> Projections<\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <a href=\"#\" class=\"dashboard-nav-item\"><i class=\"fas fa-cogs\"><\/i> Settings <\/a><a\r\n                    href=\"#\" class=\"dashboard-nav-item\"><i class=\"fas fa-user\"><\/i> Profile <\/a>\r\n          <div class=\"nav-item-divider\"><\/div>\r\n          <a\r\n                    href=\"#\" class=\"dashboard-nav-item\"><i class=\"fas fa-sign-out-alt\"><\/i> Logout <\/a>\r\n        <\/nav>\r\n    <\/div>\r\n    <div class='dashboard-app'>\r\n        <header class='dashboard-toolbar'><a href=\"#!\" class=\"menu-toggle\"><i class=\"fas fa-bars\"><\/i><\/a><\/header>\r\n        <div class='dashboard-content'>\r\n            <div class='container'>\r\n                <div class='card'>\r\n                    <div class='card-header'>\r\n                        <h1>Welcome back Jim<\/h1>\r\n                    <\/div>\r\n                    <div class='card-body'>\r\n                        <p>Your account type is: Administrator<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div><\/pre>\n
3. Now, use the following CSS styles to customize the side menu. You can set custom values for the menu classes to make it visual appearance according to your website\/app theme.<\/p>\n
:root {\r\n    --font-family-sans-serif: \"Open Sans\", -apple-system, BlinkMacSystemFont,\r\n    \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\",\r\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\r\n}\r\n\r\n*, *::before, *::after {\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    font-family: sans-serif;\r\n    line-height: 1.15;\r\n    -webkit-text-size-adjust: 100%;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n}\r\n\r\nnav {\r\n    display: block;\r\n}\r\n\r\nbody {\r\n    margin: 0;\r\n    font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\r\n    Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\",\r\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\r\n    font-size: 1rem;\r\n    font-weight: 400;\r\n    line-height: 1.5;\r\n    color: #515151;\r\n    text-align: left;\r\n    background-color: #e9edf4;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n    margin-top: 0;\r\n    margin-bottom: 0.5rem;\r\n}\r\n\r\np {\r\n    margin-top: 0;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\na {\r\n    color: #3f84fc;\r\n    text-decoration: none;\r\n    background-color: transparent;\r\n}\r\n\r\na:hover {\r\n    color: #0458eb;\r\n    text-decoration: underline;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {\r\n    font-family: \"Nunito\", sans-serif;\r\n    margin-bottom: 0.5rem;\r\n    font-weight: 500;\r\n    line-height: 1.2;\r\n}\r\n\r\nh1, .h1 {\r\n    font-size: 2.5rem;\r\n    font-weight: normal;\r\n}\r\n\r\n.card {\r\n    position: relative;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: column;\r\n    -ms-flex-direction: column;\r\n    flex-direction: column;\r\n    min-width: 0;\r\n    word-wrap: break-word;\r\n    background-color: #fff;\r\n    background-clip: border-box;\r\n    border: 1px solid rgba(0, 0, 0, 0.125);\r\n    border-radius: 0;\r\n}\r\n\r\n.card-body {\r\n    -webkit-box-flex: 1;\r\n    -webkit-flex: 1 1 auto;\r\n    -ms-flex: 1 1 auto;\r\n    flex: 1 1 auto;\r\n    padding: 1.25rem;\r\n}\r\n\r\n.card-header {\r\n    padding: 0.75rem 1.25rem;\r\n    margin-bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.03);\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.125);\r\n    text-align: center;\r\n}\r\n\r\n.dashboard {\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    min-height: 100vh;\r\n}\r\n\r\n.dashboard-app {\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: column;\r\n    -ms-flex-direction: column;\r\n    flex-direction: column;\r\n    -webkit-box-flex: 2;\r\n    -webkit-flex-grow: 2;\r\n    -ms-flex-positive: 2;\r\n    flex-grow: 2;\r\n    margin-top: 84px;\r\n}\r\n\r\n.dashboard-content {\r\n    -webkit-box-flex: 2;\r\n    -webkit-flex-grow: 2;\r\n    -ms-flex-positive: 2;\r\n    flex-grow: 2;\r\n    padding: 25px;\r\n}\r\n\r\n.dashboard-nav {\r\n    min-width: 238px;\r\n    position: fixed;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    overflow: auto;\r\n    background-color: #373193;\r\n}\r\n\r\n.dashboard-compact .dashboard-nav {\r\n    display: none;\r\n}\r\n\r\n.dashboard-nav header {\r\n    min-height: 84px;\r\n    padding: 8px 27px;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-pack: center;\r\n    -webkit-justify-content: center;\r\n    -ms-flex-pack: center;\r\n    justify-content: center;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n}\r\n\r\n.dashboard-nav header .menu-toggle {\r\n    display: none;\r\n    margin-right: auto;\r\n}\r\n\r\n.dashboard-nav a {\r\n    color: #515151;\r\n}\r\n\r\n.dashboard-nav a:hover {\r\n    text-decoration: none;\r\n}\r\n\r\n.dashboard-nav {\r\n    background-color: #443ea2;\r\n}\r\n\r\n.dashboard-nav a {\r\n    color: #fff;\r\n}\r\n\r\n.brand-logo {\r\n    font-family: \"Nunito\", sans-serif;\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    color: #515151;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n}\r\n\r\n.brand-logo:focus, .brand-logo:active, .brand-logo:hover {\r\n    color: #dbdbdb;\r\n    text-decoration: none;\r\n}\r\n\r\n.brand-logo i {\r\n    color: #d2d1d1;\r\n    font-size: 27px;\r\n    margin-right: 10px;\r\n}\r\n\r\n.dashboard-nav-list {\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: column;\r\n    -ms-flex-direction: column;\r\n    flex-direction: column;\r\n}\r\n\r\n.dashboard-nav-item {\r\n    min-height: 56px;\r\n    padding: 8px 20px 8px 70px;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    letter-spacing: 0.02em;\r\n    transition: ease-out 0.5s;\r\n}\r\n\r\n.dashboard-nav-item i {\r\n    width: 36px;\r\n    font-size: 19px;\r\n    margin-left: -40px;\r\n}\r\n\r\n.dashboard-nav-item:hover {\r\n    background: rgba(255, 255, 255, 0.04);\r\n}\r\n\r\n.active {\r\n    background: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.dashboard-nav-dropdown {\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: column;\r\n    -ms-flex-direction: column;\r\n    flex-direction: column;\r\n}\r\n\r\n.dashboard-nav-dropdown.show {\r\n    background: rgba(255, 255, 255, 0.04);\r\n}\r\n\r\n.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle {\r\n    font-weight: bold;\r\n}\r\n\r\n.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle:after {\r\n    -webkit-transform: none;\r\n    -o-transform: none;\r\n    transform: none;\r\n}\r\n\r\n.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n}\r\n\r\n.dashboard-nav-dropdown-toggle:after {\r\n    content: \"\";\r\n    margin-left: auto;\r\n    display: inline-block;\r\n    width: 0;\r\n    height: 0;\r\n    border-left: 5px solid transparent;\r\n    border-right: 5px solid transparent;\r\n    border-top: 5px solid rgba(81, 81, 81, 0.8);\r\n    -webkit-transform: rotate(90deg);\r\n    -o-transform: rotate(90deg);\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.dashboard-nav .dashboard-nav-dropdown-toggle:after {\r\n    border-top-color: rgba(255, 255, 255, 0.72);\r\n}\r\n\r\n.dashboard-nav-dropdown-menu {\r\n    display: none;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: column;\r\n    -ms-flex-direction: column;\r\n    flex-direction: column;\r\n}\r\n\r\n.dashboard-nav-dropdown-item {\r\n    min-height: 40px;\r\n    padding: 8px 20px 8px 70px;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    transition: ease-out 0.5s;\r\n}\r\n\r\n.dashboard-nav-dropdown-item:hover {\r\n    background: rgba(255, 255, 255, 0.04);\r\n}\r\n\r\n.menu-toggle {\r\n    position: relative;\r\n    width: 42px;\r\n    height: 42px;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    -webkit-box-pack: center;\r\n    -webkit-justify-content: center;\r\n    -ms-flex-pack: center;\r\n    justify-content: center;\r\n    color: #443ea2;\r\n}\r\n\r\n.menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus {\r\n    text-decoration: none;\r\n    color: #875de5;\r\n}\r\n\r\n.menu-toggle i {\r\n    font-size: 20px;\r\n}\r\n\r\n.dashboard-toolbar {\r\n    min-height: 84px;\r\n    background-color: #dfdfdf;\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n    -webkit-align-items: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    padding: 8px 27px;\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    left: 0;\r\n    z-index: 1000;\r\n}\r\n\r\n.nav-item-divider {\r\n    height: 1px;\r\n    margin: 1rem 0;\r\n    overflow: hidden;\r\n    background-color: rgba(236, 238, 239, 0.3);\r\n}\r\n\r\n@media (min-width: 992px) {\r\n    .dashboard-app {\r\n        margin-left: 238px;\r\n    }\r\n\r\n    .dashboard-compact .dashboard-app {\r\n        margin-left: 0;\r\n    }\r\n}\r\n\r\n\r\n@media (max-width: 768px) {\r\n    .dashboard-content {\r\n        padding: 15px 0px;\r\n    }\r\n}\r\n\r\n@media (max-width: 992px) {\r\n    .dashboard-nav {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        right: 0;\r\n        left: 0;\r\n        bottom: 0;\r\n        z-index: 1070;\r\n    }\r\n\r\n    .dashboard-nav.mobile-show {\r\n        display: block;\r\n    }\r\n}\r\n\r\n@media (max-width: 992px) {\r\n    .dashboard-nav header .menu-toggle {\r\n        display: -webkit-box;\r\n        display: -webkit-flex;\r\n        display: -ms-flexbox;\r\n        display: flex;\r\n    }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n    .dashboard-toolbar {\r\n        left: 238px;\r\n    }\r\n\r\n    .dashboard-compact .dashboard-toolbar {\r\n        left: 0;\r\n    }\r\n}<\/pre>\n
4. Load the jQuery<\/a> and Bootstrap 4 JS<\/a> by adding the following CDN links just before closing the body element:<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js'><\/script>\r\n<\/pre>\n
5. Finally, add the following JavaScript function to activate the menu. It allows users to smoothly navigate through dropdown menus and adapt the menu’s appearance to different screen sizes.<\/p>\n
const mobileScreen = window.matchMedia(\"(max-width: 990px )\");\r\n$(document).ready(function () {\r\n    $(\".dashboard-nav-dropdown-toggle\").click(function () {\r\n        $(this).closest(\".dashboard-nav-dropdown\")\r\n            .toggleClass(\"show\")\r\n            .find(\".dashboard-nav-dropdown\")\r\n            .removeClass(\"show\");\r\n        $(this).parent()\r\n            .siblings()\r\n            .removeClass(\"show\");\r\n    });\r\n    $(\".menu-toggle\").click(function () {\r\n        if (mobileScreen.matches) {\r\n            $(\".dashboard-nav\").toggleClass(\"mobile-show\");\r\n        } else {\r\n            $(\".dashboard\").toggleClass(\"dashboard-compact\");\r\n        }\r\n    });\r\n});<\/pre>\n
That’s all! hopefully, you have successfully created the left slide menu. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This Bootstrap code example helps you to create a responsive left slide menu for web applications. It enhances navigation and…<\/p>\n","protected":false},"author":1,"featured_media":8507,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[144],"tags":[],"class_list":["post-8497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-navbars"],"acf":[],"yoast_head":"\nBootstrap Left Slide Menu With Example — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Left Slide Menu With Example — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-14T17:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:53:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Bootstrap Left Slide Menu With Example\",\"datePublished\":\"2024-01-14T17:51:00+00:00\",\"dateModified\":\"2024-01-22T10:53:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\"},\"wordCount\":223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png\",\"articleSection\":[\"Bootstrap Navbars\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\",\"url\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\",\"name\":\"Bootstrap Left Slide Menu With Example — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png\",\"datePublished\":\"2024-01-14T17:51:00+00:00\",\"dateModified\":\"2024-01-22T10:53:48+00:00\",\"description\":\"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png\",\"width\":1280,\"height\":960,\"caption\":\"Bootstrap Left Slide Menu With Example\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap Navbars\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/bootstrap-navbars\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Left Slide Menu With Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Left Slide Menu With Example — CodeHim","description":"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.","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:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Left Slide Menu With Example — CodeHim","og_description":"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-14T17:51:00+00:00","article_modified_time":"2024-01-22T10:53:48+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Bootstrap Left Slide Menu With Example","datePublished":"2024-01-14T17:51:00+00:00","dateModified":"2024-01-22T10:53:48+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/"},"wordCount":223,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png","articleSection":["Bootstrap Navbars"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/","url":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/","name":"Bootstrap Left Slide Menu With Example — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png","datePublished":"2024-01-14T17:51:00+00:00","dateModified":"2024-01-22T10:53:48+00:00","description":"Here is a free code snippet to create a Bootstrap Left Slide Menu With Example. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Bootstrap-Left-Slide-Menu-With-Example-3.png","width":1280,"height":960,"caption":"Bootstrap Left Slide Menu With Example"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-navbars\/bootstrap-left-slide-menu-with-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https:\/\/codehim.com\/category\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"Bootstrap Navbars","item":"https:\/\/codehim.com\/category\/bootstrap\/bootstrap-navbars\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Left Slide Menu With Example"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":5411,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8497"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8497\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8507"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}