{"id":3609,"date":"2017-05-19T13:29:23","date_gmt":"2017-05-19T13:29:23","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3609"},"modified":"2023-09-26T10:40:57","modified_gmt":"2023-09-26T10:40:57","slug":"2-demos-of-angular-side-menu-with-bootstrap-navbar","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/","title":{"rendered":"2 Demos of Angular side menu with Bootstrap navbar"},"content":{"rendered":"<h3><strong>Creating the sidebar with Angular and Bootstrap navbar<\/strong><\/h3>\n<p>The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar.<\/p>\n<p>You may also place the icons from the materialIcon with the menu items.<\/p>\n<h6><strong><a href=\"https:\/\/github.com\/saltyquark\/ng-bs-navbar\" target=\"_blank\" rel=\"nofollow\">Developer page<\/a> <a href=\"https:\/\/github.com\/saltyquark\/ng-bs-navbar\/archive\/master.zip\" target=\"_blank\" rel=\"nofollow\">Download plug-in<\/a><\/strong><\/h6>\n<h3><strong>How to setup this Angular directive?<\/strong><\/h3>\n<p>You need to setup the routes with navbar in the JS code where you may also set the icons. See the navbar.js and ng-bs-navbar.js files that download with the zipped file.<\/p>\n<p>Include the dependency files:<\/p>\n<blockquote><p>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;bower_components\/ng-bs-navbar\/dist\/ng-bs-navbar.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;bower_components\/ng-bs-navbar\/dist\/ng-bs-navbar.css&#8221; type=&#8221;text\/css&#8221; \/&gt;<br \/>\n&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;bower_components\/ng-bs-navbar\/dist\/ng-bs-navbar-theme-dark.css&#8221; type=&#8221;text\/css&#8221; \/&gt;<br \/>\n&lt;link href=&#8221;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/p><\/blockquote>\n<p>See the demo and code below for learning how to use the code.<\/p>\n<h3><strong>A demo with dark theme<\/strong><\/h3>\n<p>In this demo, the dark theme is used for the menus. You can see the position heading with two buttons. Upon pressing the top, the position of the left menu will change to the top. Similarly, you may use the Condensed or Full view of the menu by pressing the respective button:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3610\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_1-Angular-sidebar.png\" alt=\"Angular sidebar\" width=\"461\" height=\"514\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_1-Angular-sidebar.png 461w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_1-Angular-sidebar-269x300.png 269w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/p>\n<h6><a href=\"\/angularjs\/demo.php?ex=15.0_1\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See the online demo and code<\/strong><\/a><\/h6>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!doctype html&gt;\r\n&lt;html ng-app=\"ng-bs-navbar-example\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"\r\n          rel=\"stylesheet\"&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"&gt;\r\n\r\n    &lt;link rel=\"stylesheet\" href=\"css\/ang-navbar\/ng-bs-navbar.css\" type=\"text\/css\" \/&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"css\/ang-navbar\/ng-bs-navbar-theme-dark.css\" type=\"text\/css\" \/&gt;\r\n\r\n    &lt;link rel=\"stylesheet\" href=\"css\/ang-navbar\/example.css\" type=\"text\/css\" \/&gt;\r\n\r\n  \r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;body&gt;\r\n\r\n  &lt;navbar position=\"left\"&gt;&lt;\/navbar&gt;\r\n\r\n  &lt;div class=\"main\" ng-controller=\"ExampleController\"&gt;\r\n    &lt;h1&gt;ng-bs-navbar example&lt;\/h1&gt;\r\n\r\n    &lt;p&gt;Examples on how to interactive with the navbar&lt;\/p&gt;\r\n\r\n    &lt;h4&gt;Position&lt;\/h4&gt;\r\n    &lt;pre&gt;&lt;\/pre&gt;\r\n    &lt;div class=\"btn-group\"&gt;\r\n      &lt;a class=\"btn btn-primary\" ng-click=\"position = 'left'\"&gt;Left&lt;\/a&gt;\r\n      &lt;a class=\"btn btn-primary\" ng-click=\"position = 'top'\"&gt;Top&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;h4&gt;Size (left only)&lt;\/h4&gt;\r\n\r\n    &lt;p&gt;Setting for the navbar when positioned to the left &lt;i&gt;and right in the future&lt;\/i&gt;&lt;\/p&gt;\r\n    &lt;pre&gt;&lt;\/pre&gt;\r\n    &lt;div class=\"btn-group\"&gt;\r\n      &lt;a class=\"btn btn-primary\" ng-click=\"size = 'condensed'\"&gt;Condensed&lt;\/a&gt;\r\n      &lt;a class=\"btn btn-primary\" ng-click=\"size = 'full'\"&gt;Full&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;h3&gt;Current Controller&lt;\/h3&gt;\r\n    &lt;div class=\"well\" ng-view&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.5.0-beta.1\/angular.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.5.0-rc.0\/angular-route.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular-ui-bootstrap\/0.14.3\/ui-bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n\r\n  &lt;script type=\"text\/javascript\" src=\"js\/ang-navbar\/ng-bs-navbar.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/javascript\" src=\"js\/ang-navbar\/navbar.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n\r\n<\/pre>\n<h3><strong>A demo of light color theme<\/strong><\/h3>\n<p>For the above demo, the <em>ng-bs-navbar-theme-dark.css<\/em> file was used for creating the darkish theme. You may customize that file or add your own style to match the theme of left or top navigation bar with the rest of the website design.<\/p>\n<p>For this demo, the ng-bs-navbar-theme-dark.css is removed and the light color scheme is used as follows:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3611\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_2-Angular-top-bar.png\" alt=\"Angular top bar\" width=\"464\" height=\"351\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_2-Angular-top-bar.png 464w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_2-Angular-top-bar-300x227.png 300w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/p>\n<h6><a href=\"\/angularjs\/demo.php?ex=15.0_2\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p>Learn more about this directive <a href=\"https:\/\/github.com\/saltyquark\/ng-bs-navbar\" target=\"_blank\" rel=\"nofollow\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating the sidebar with Angular and Bootstrap navbar The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar. You may also place the icons from the materialIcon with the menu items. Developer page Download plug-in How to setup this Angular &#8230; <a title=\"2 Demos of Angular side menu with Bootstrap navbar\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\" aria-label=\"More on 2 Demos of Angular side menu with Bootstrap navbar\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3610,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[34],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>2 Demos of Angular side menu with Bootstrap navbar<\/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:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"2 Demos of Angular side menu with Bootstrap navbar\" \/>\n<meta property=\"og:description\" content=\"Creating the sidebar with Angular and Bootstrap navbar The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar. You may also place the icons from the materialIcon with the menu items. Developer page Download plug-in How to setup this Angular ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-19T13:29:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-26T10:40:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_1-Angular-sidebar.png\" \/>\n\t<meta property=\"og:image:width\" content=\"461\" \/>\n\t<meta property=\"og:image:height\" content=\"514\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\",\"url\":\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\",\"name\":\"2 Demos of Angular side menu with Bootstrap navbar\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-05-19T13:29:23+00:00\",\"dateModified\":\"2023-09-26T10:40:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"2 Demos of Angular side menu with Bootstrap navbar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"2 Demos of Angular side menu with Bootstrap navbar","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:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/","og_locale":"en_US","og_type":"article","og_title":"2 Demos of Angular side menu with Bootstrap navbar","og_description":"Creating the sidebar with Angular and Bootstrap navbar The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar. You may also place the icons from the materialIcon with the menu items. Developer page Download plug-in How to setup this Angular ... Read more","og_url":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/","article_published_time":"2017-05-19T13:29:23+00:00","article_modified_time":"2023-09-26T10:40:57+00:00","og_image":[{"width":461,"height":514,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/05\/15.0_1-Angular-sidebar.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/","url":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/","name":"2 Demos of Angular side menu with Bootstrap navbar","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-05-19T13:29:23+00:00","dateModified":"2023-09-26T10:40:57+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/2-demos-of-angular-side-menu-with-bootstrap-navbar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"2 Demos of Angular side menu with Bootstrap navbar"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3609"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3609"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3609\/revisions"}],"predecessor-version":[{"id":9943,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3609\/revisions\/9943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3610"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}