From 68be2b5bd1bcc8713f632ffb4aa88de15a5acd7d Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 10 Jul 2018 10:27:56 +0200
Subject: [PATCH 01/10] feat(oui-navbar): add brand and toggler component

---
 packages/oui-navbar/README.md                 | 14 +++--
 .../src/brand/navbar-brand.component.js       | 29 ++++++++++
 .../oui-navbar/src/brand/navbar-brand.html    | 16 ++++++
 packages/oui-navbar/src/index.js              |  4 ++
 packages/oui-navbar/src/navbar.component.js   |  8 ++-
 packages/oui-navbar/src/navbar.controller.js  | 10 ----
 packages/oui-navbar/src/navbar.html           | 57 ++++++-------------
 .../src/toggler/navbar-toggler.component.js   | 20 +++++++
 .../src/toggler/navbar-toggler.html           | 25 ++++++++
 9 files changed, 127 insertions(+), 56 deletions(-)
 create mode 100644 packages/oui-navbar/src/brand/navbar-brand.component.js
 create mode 100644 packages/oui-navbar/src/brand/navbar-brand.html
 create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.component.js
 create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.html

diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index 2670d2d3..f1587a96 100644
--- a/packages/oui-navbar/README.md
+++ b/packages/oui-navbar/README.md
@@ -5,15 +5,19 @@
 ## Usage
 
 ```html:preview
-<div class="oui-doc-preview-only-keep-children" style="margin-bottom: 15px;">
 <oui-navbar
-    brand="$ctrl.brand"
     active-link="lorem"
     main-links="$ctrl.mainLinks"
-    aside-links="$ctrl.asideLinks"
-    toggler-links="$ctrl.togglerLinks">
+    aside-links="$ctrl.asideLinks">
+    <oui-navbar-toggler
+        links="$ctrl.togglerLinks">
+    </oui-navbar-toggler>
+    <oui-navbar-brand
+        href="{{$ctrl.brand.url}}"
+        aria-label="{{$ctrl.brand.label}}"
+        icon-class="{{$ctrl.brand.iconClass}}">
+    </oui-navbar-brand>
 </oui-navbar>
-</div>
 ```
 
 Note: All children menus have `.oui-navbar-menu_fixed`. The component is intended to be used in `fixed` mode. To avoid being hidden by the documentation navbar, this example is not `fixed`.
diff --git a/packages/oui-navbar/src/brand/navbar-brand.component.js b/packages/oui-navbar/src/brand/navbar-brand.component.js
new file mode 100644
index 00000000..a1d3f3d2
--- /dev/null
+++ b/packages/oui-navbar/src/brand/navbar-brand.component.js
@@ -0,0 +1,29 @@
+import template from "./navbar-brand.html";
+
+export default {
+    bindings: {
+        href: "@",
+        heading: "@?",
+        ariaLabel: "@?",
+
+        iconAlt: "@?",
+        iconClass: "@?",
+        iconSrc: "@?"
+    },
+    controller: class {
+        constructor ($element, $timeout) {
+            "ngInject";
+
+            this.$element = $element;
+            this.$timeout = $timeout;
+        }
+
+        $postLink () {
+            this.$timeout(() =>
+                this.$element
+                    .removeAttr("aria-label")
+            );
+        }
+    },
+    template
+};
diff --git a/packages/oui-navbar/src/brand/navbar-brand.html b/packages/oui-navbar/src/brand/navbar-brand.html
new file mode 100644
index 00000000..731d301d
--- /dev/null
+++ b/packages/oui-navbar/src/brand/navbar-brand.html
@@ -0,0 +1,16 @@
+<a class="oui-navbar__brand"
+    ng-attr-aria-label="{{::!!$ctrl.ariaLabel ? $ctrl.ariaLabel : null}}"
+    ng-attr-title="{{::!!$ctrl.ariaLabel ? $ctrl.ariaLabel : null}}"
+    ng-href="{{::$ctrl.href}}">
+    <img class="navbar-logo"
+        ng-if="::!!$ctrl.iconSrc"
+        ng-attr-alt="{{::!!$ctrl.iconAlt ? $ctrl.iconAlt : null}}"
+        ng-class="::!!$ctrl.iconClass ? $ctrl.iconClass : null"
+        ng-src="{{::$ctrl.iconSrc}}">
+    <span ng-if="::!$ctrl.iconSrc"
+        ng-class="::$ctrl.iconClass">
+    </span>
+    <span class="oui-navbar__title" ng-if="::$ctrl.heading"
+        ng-bind="::$ctrl.heading">
+    </span>
+</a>
diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js
index abddba4c..91c629cf 100644
--- a/packages/oui-navbar/src/index.js
+++ b/packages/oui-navbar/src/index.js
@@ -1,10 +1,12 @@
 import KEYBOARD_KEYS from "./keyboard-keys.constant";
 import Navbar from "./navbar.component";
+import NavbarBrand from "./brand/navbar-brand.component";
 import NavbarConfigurationProvider from "./navbar.provider.js";
 import NavbarGroup from "./group/navbar-group.directive";
 import NavbarGroupService from "./group/navbar-group.service";
 import NavbarMenu from "./menu/navbar-menu.component";
 import NavbarService from "./navbar.service";
+import NavbarToggler from "./toggler/navbar-toggler.component";
 
 export default angular
     .module("oui.navbar", [
@@ -13,8 +15,10 @@ export default angular
     ])
     .constant("KEYBOARD_KEYS", KEYBOARD_KEYS)
     .component("ouiNavbar", Navbar)
+    .component("ouiNavbarBrand", NavbarBrand)
     .directive("ouiNavbarGroup", NavbarGroup)
     .component("ouiNavbarMenu", NavbarMenu)
+    .component("ouiNavbarToggler", NavbarToggler)
     .provider("ouiNavbarConfiguration", NavbarConfigurationProvider)
     .service("NavbarService", NavbarService)
     .service("NavbarGroupService", NavbarGroupService)
diff --git a/packages/oui-navbar/src/navbar.component.js b/packages/oui-navbar/src/navbar.component.js
index b3dd175c..9db97d51 100644
--- a/packages/oui-navbar/src/navbar.component.js
+++ b/packages/oui-navbar/src/navbar.component.js
@@ -12,5 +12,11 @@ export default {
         fixed: "<?"
     },
     controller,
-    template
+    template,
+    transclude: {
+        asideSlot: "?ouiNavbarAside",
+        brandSlot: "?ouiNavbarBrand",
+        mainSlot: "?ouiNavbarMain",
+        togglerSlot: "?ouiNavbarToggler"
+    }
 };
diff --git a/packages/oui-navbar/src/navbar.controller.js b/packages/oui-navbar/src/navbar.controller.js
index 83b29588..b37e4c2c 100644
--- a/packages/oui-navbar/src/navbar.controller.js
+++ b/packages/oui-navbar/src/navbar.controller.js
@@ -22,7 +22,6 @@ export default class {
         // If no togglerLinks attribute, we use the value of mainLinks
         if (!angular.isDefined(this.$attrs.togglerLinks) && angular.isDefined(this.$attrs.mainLinks)) {
             this.togglerLinks = this.mainLinks;
-            this.togglerLoaded = true;
         }
     }
 
@@ -33,15 +32,6 @@ export default class {
         addBooleanParameter(this, "fixed");
     }
 
-    $onChanges (changes) {
-        this.updateLinks();
-
-        // Get togglerLinks changes for the loader
-        if (changes.togglerLinks) {
-            this.togglerLoaded = !!changes.togglerLinks.currentValue;
-        }
-    }
-
     $postLink () {
         // Avoid $element DOM unsync for jqLite methods
         this.$timeout(() => {
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index ce09a1e7..f719062a 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -1,47 +1,24 @@
 <!-- Toggler -->
-<button class="oui-navbar-toggler" type="button"
-    aria-haspopup="true" aria-expanded="{{!!$ctrl.navigation['toggler']}}"
-    ng-if="::$ctrl.togglerLinks"
-    ng-click="$ctrl.toggleMenu('toggler')"
-    oui-navbar-group="toggler">
-    <span class="oui-navbar-toggler__hamburger">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-    </span>
-</button>
-<span class="oui-navbar-toggler" ng-if="!$ctrl.togglerLoaded">
-    <oui-spinner size="s"></oui-spinner>
-</span>
-<oui-navbar-menu
-    ng-if="::$ctrl.togglerLinks"
-    class="oui-navbar-menu_fixed oui-navbar-menu_toggle"
-    children-class="oui-navbar-menu_fixed"
-    name="toggler"
-    links="::$ctrl.togglerLinks"
-    navigation="$ctrl.navigation"
-    expanded="$ctrl.navigation['toggler']">
-</oui-navbar-menu>
+<div ng-transclude="togglerSlot">
+    <oui-navbar-toggler
+        ng-if="::$ctrl.togglerLinks"
+        links="::$ctrl.togglerLinks">
+    </oui-navbar-toggler>
+</div>
 <!-- /Toggler -->
 
 <!-- Brand -->
-<a class="oui-navbar__brand" ng-if="::$ctrl.brand"
-    ng-attr-aria-label="{{::!!$ctrl.brand.label ? $ctrl.brand.label : null}}"
-    ng-attr-title="{{::!!$ctrl.brand.label ? $ctrl.brand.label : null}}"
-    ng-href="{{::$ctrl.brand.url}}">
-    <img class="navbar-logo"
-        ng-if="::!!$ctrl.brand.iconSrc"
-        ng-attr-alt="{{::!!$ctrl.brand.iconAlt ? $ctrl.brand.iconAlt : null}}"
-        ng-class="::!!$ctrl.brand.iconClass ? $ctrl.brand.iconClass : null"
-        ng-src="{{::$ctrl.brand.iconSrc}}">
-    <span ng-if="::!$ctrl.brand.iconSrc"
-        ng-class="::$ctrl.brand.iconClass">
-    </span>
-    <span class="oui-navbar__title" ng-if="::$ctrl.brand.title"
-        ng-bind="::$ctrl.brand.title">
-    </span>
-</a>
+<div ng-transclude="brandSlot">
+    <oui-navbar-brand
+        ng-if="::$ctrl.brand"
+        href="{{::$ctrl.brand.url}}"
+        heading="{{::$ctrl.brand.title}}"
+        aria-label="{{::$ctrl.brand.label}}"
+        icon-alt="{{::$ctrl.brand.iconAlt}}"
+        icon-class="{{::$ctrl.brand.iconClass}}"
+        icon-src="{{::$ctrl.brand.iconSrc}}">
+    </oui-navbar-brand>
+</div>
 <!-- /Brand -->
 
 <!-- Main Links -->
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.component.js b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
new file mode 100644
index 00000000..d7a0d1cf
--- /dev/null
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
@@ -0,0 +1,20 @@
+import template from "./navbar-toggler.html";
+
+export default {
+    require: {
+        navbarCtrl: "^^ouiNavbar"
+    },
+    bindings: {
+        links: "<"
+    },
+    controller: class {
+
+        $onChanges (changes) {
+            // Get links changes for the loader
+            if (changes.links) {
+                this.loaded = !!changes.links.currentValue;
+            }
+        }
+    },
+    template
+};
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.html b/packages/oui-navbar/src/toggler/navbar-toggler.html
new file mode 100644
index 00000000..b0b8594c
--- /dev/null
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.html
@@ -0,0 +1,25 @@
+<button class="oui-navbar-toggler" type="button"
+    aria-haspopup="true" aria-expanded="{{!!$ctrl.navbarCtrl.navigation['toggler']}}"
+    ng-if="::$ctrl.links"
+    ng-click="$ctrl.navbarCtrl.toggleMenu('toggler')"
+    oui-navbar-group="toggler">
+    <span class="oui-navbar-toggler__hamburger">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </span>
+</button>
+<span class="oui-navbar-toggler"
+    ng-if="!$ctrl.loaded">
+    <oui-spinner size="s"></oui-spinner>
+</span>
+<oui-navbar-menu
+    ng-if="::$ctrl.links"
+    class="oui-navbar-menu_fixed oui-navbar-menu_toggle"
+    children-class="oui-navbar-menu_fixed"
+    name="toggler"
+    links="::$ctrl.links"
+    navigation="$ctrl.navbarCtrl.navigation"
+    expanded="$ctrl.navbarCtrl.navigation['toggler']">
+</oui-navbar-menu>

From 7c3fcec5520a2e569f92d4a1a62d9468040db232 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 10 Jul 2018 17:12:26 +0200
Subject: [PATCH 02/10] feat(oui-navbar): add link component

---
 packages/oui-navbar/src/index.js              |  4 ++-
 .../src/link/navbar-link.component.js         | 19 ++++++++++++++
 .../src/link/navbar-link.controller.js        | 20 ++++++++++++++
 packages/oui-navbar/src/link/navbar-link.html | 14 ++++++++++
 packages/oui-navbar/src/navbar.html           | 26 ++++++++-----------
 .../src/toggler/navbar-toggler.component.js   |  1 -
 6 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 packages/oui-navbar/src/link/navbar-link.component.js
 create mode 100644 packages/oui-navbar/src/link/navbar-link.controller.js
 create mode 100644 packages/oui-navbar/src/link/navbar-link.html

diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js
index 91c629cf..3a802ba9 100644
--- a/packages/oui-navbar/src/index.js
+++ b/packages/oui-navbar/src/index.js
@@ -4,6 +4,7 @@ import NavbarBrand from "./brand/navbar-brand.component";
 import NavbarConfigurationProvider from "./navbar.provider.js";
 import NavbarGroup from "./group/navbar-group.directive";
 import NavbarGroupService from "./group/navbar-group.service";
+import NavbarLink from "./link/navbar-link.component";
 import NavbarMenu from "./menu/navbar-menu.component";
 import NavbarService from "./navbar.service";
 import NavbarToggler from "./toggler/navbar-toggler.component";
@@ -16,9 +17,10 @@ export default angular
     .constant("KEYBOARD_KEYS", KEYBOARD_KEYS)
     .component("ouiNavbar", Navbar)
     .component("ouiNavbarBrand", NavbarBrand)
-    .directive("ouiNavbarGroup", NavbarGroup)
+    .component("ouiNavbarLink", NavbarLink)
     .component("ouiNavbarMenu", NavbarMenu)
     .component("ouiNavbarToggler", NavbarToggler)
+    .directive("ouiNavbarGroup", NavbarGroup)
     .provider("ouiNavbarConfiguration", NavbarConfigurationProvider)
     .service("NavbarService", NavbarService)
     .service("NavbarGroupService", NavbarGroupService)
diff --git a/packages/oui-navbar/src/link/navbar-link.component.js b/packages/oui-navbar/src/link/navbar-link.component.js
new file mode 100644
index 00000000..39bc74bd
--- /dev/null
+++ b/packages/oui-navbar/src/link/navbar-link.component.js
@@ -0,0 +1,19 @@
+import controller from "./navbar-link.controller";
+import template from "./navbar-link.html";
+
+export default {
+    require: {
+        navbarCtrl: "^^ouiNavbar"
+    },
+    bindings: {
+        name: "@",
+        text: "@",
+        href: "@",
+        state: "@?",
+        stateParams: "<?",
+        label: "@?ariaLabel",
+        variant: "@?"
+    },
+    controller,
+    template
+};
diff --git a/packages/oui-navbar/src/link/navbar-link.controller.js b/packages/oui-navbar/src/link/navbar-link.controller.js
new file mode 100644
index 00000000..df5d5487
--- /dev/null
+++ b/packages/oui-navbar/src/link/navbar-link.controller.js
@@ -0,0 +1,20 @@
+export default class {
+    constructor ($element, $timeout) {
+        "ngInject";
+
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-navbar-list__item")
+        );
+    }
+
+    // Return value of "ui-sref"
+    getFullSref () {
+        return `${this.state}(${JSON.stringify(this.stateParams)})`;
+    }
+}
diff --git a/packages/oui-navbar/src/link/navbar-link.html b/packages/oui-navbar/src/link/navbar-link.html
new file mode 100644
index 00000000..291417be
--- /dev/null
+++ b/packages/oui-navbar/src/link/navbar-link.html
@@ -0,0 +1,14 @@
+<a class="oui-navbar-link"
+    ng-attr-aria-label="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-attr-title="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-class="::{
+        'oui-navbar-link_active': $ctrl.name === $ctrl.navbarCtrl.activeLink,
+        'oui-navbar-link_primary': $ctrl.variant === 'primary',
+        'oui-navbar-link_secondary': $ctrl.variant === 'secondary',
+        'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
+    }"
+    ng-href="{{::$ctrl.href}}"
+    ng-bind="::$ctrl.text"
+    ui-sref="{{::$ctrl.getFullSref()}}"
+    ui-sref-active="oui-navbar-link_active">
+</a>
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index f719062a..38de5155 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -22,23 +22,19 @@
 <!-- /Brand -->
 
 <!-- Main Links -->
-<ul class="oui-navbar-list oui-navbar-list_main oui-navbar_desktop-only" ng-if="::$ctrl.mainLinks">
-    <li class="oui-navbar-list__item"
+<div class="oui-navbar-list oui-navbar-list_main oui-navbar_desktop-only"
+    ng-if="::$ctrl.mainLinks"
+    ng-transclude="mainSlot">
+    <oui-navbar-link
+        name="{{::managerLink.name}}"
+        text="{{::managerLink.title}}"
+        href="{{::managerLink.url}}"
+        variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
+        aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
         ng-repeat="managerLink in ::$ctrl.mainLinks track by $index"
         ng-class="::!!managerLink.class ? managerLink.class : null">
-        <a class="oui-navbar-link"
-            ng-attr-aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
-            ng-attr-title="{{::!!managerLink.label ? managerLink.label : null}}"
-            ng-class="{
-                'oui-navbar-link_active': managerLink.name === $ctrl.activeLink,
-                'oui-navbar-link_primary': managerLink.isPrimary,
-                'oui-navbar-link_secondary': !managerLink.isPrimary
-            }"
-            ng-href="{{::managerLink.url}}"
-            ng-bind="::managerLink.title">
-        </a>
-    </li>
-</ul>
+    </oui-navbar-link>
+</div>
 <!-- /Main Links -->
 
 <!-- Aside Links -->
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.component.js b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
index d7a0d1cf..942f941d 100644
--- a/packages/oui-navbar/src/toggler/navbar-toggler.component.js
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
@@ -8,7 +8,6 @@ export default {
         links: "<"
     },
     controller: class {
-
         $onChanges (changes) {
             // Get links changes for the loader
             if (changes.links) {

From 04f3a9601bacd1e04d9103c97a5cc5dc99d9c8dd Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Wed, 11 Jul 2018 13:18:01 +0200
Subject: [PATCH 03/10] feat(oui-navbar): add notification component

---
 packages/oui-navbar/src/index.js              |   4 +-
 packages/oui-navbar/src/link/navbar-link.html |  15 ++-
 packages/oui-navbar/src/navbar.html           | 111 +++---------------
 .../navbar-notification.component.js          |  20 ++++
 .../navbar-notification.controller.js         |  17 +++
 .../src/notification/navbar-notification.html |  96 +++++++++++++++
 6 files changed, 164 insertions(+), 99 deletions(-)
 create mode 100644 packages/oui-navbar/src/notification/navbar-notification.component.js
 create mode 100644 packages/oui-navbar/src/notification/navbar-notification.controller.js
 create mode 100644 packages/oui-navbar/src/notification/navbar-notification.html

diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js
index 3a802ba9..4e66e8b0 100644
--- a/packages/oui-navbar/src/index.js
+++ b/packages/oui-navbar/src/index.js
@@ -1,11 +1,12 @@
 import KEYBOARD_KEYS from "./keyboard-keys.constant";
 import Navbar from "./navbar.component";
 import NavbarBrand from "./brand/navbar-brand.component";
-import NavbarConfigurationProvider from "./navbar.provider.js";
+import NavbarConfigurationProvider from "./navbar.provider";
 import NavbarGroup from "./group/navbar-group.directive";
 import NavbarGroupService from "./group/navbar-group.service";
 import NavbarLink from "./link/navbar-link.component";
 import NavbarMenu from "./menu/navbar-menu.component";
+import NavbarNotification from "./notification/navbar-notification.component";
 import NavbarService from "./navbar.service";
 import NavbarToggler from "./toggler/navbar-toggler.component";
 
@@ -19,6 +20,7 @@ export default angular
     .component("ouiNavbarBrand", NavbarBrand)
     .component("ouiNavbarLink", NavbarLink)
     .component("ouiNavbarMenu", NavbarMenu)
+    .component("ouiNavbarNotification", NavbarNotification)
     .component("ouiNavbarToggler", NavbarToggler)
     .directive("ouiNavbarGroup", NavbarGroup)
     .provider("ouiNavbarConfiguration", NavbarConfigurationProvider)
diff --git a/packages/oui-navbar/src/link/navbar-link.html b/packages/oui-navbar/src/link/navbar-link.html
index 291417be..2c1e4fae 100644
--- a/packages/oui-navbar/src/link/navbar-link.html
+++ b/packages/oui-navbar/src/link/navbar-link.html
@@ -1,13 +1,26 @@
 <a class="oui-navbar-link"
+    ng-if="::!!$ctrl.href"
     ng-attr-aria-label="{{::!!$ctrl.label ? $ctrl.label : null}}"
     ng-attr-title="{{::!!$ctrl.label ? $ctrl.label : null}}"
-    ng-class="::{
+    ng-class="{
         'oui-navbar-link_active': $ctrl.name === $ctrl.navbarCtrl.activeLink,
         'oui-navbar-link_primary': $ctrl.variant === 'primary',
         'oui-navbar-link_secondary': $ctrl.variant === 'secondary',
         'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
     }"
     ng-href="{{::$ctrl.href}}"
+    ng-bind="::$ctrl.text">
+</a>
+<a class="oui-navbar-link"
+    ng-if="::!!$ctrl.state"
+    ng-attr-aria-label="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-attr-title="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-class="{
+        'oui-navbar-link_active': $ctrl.name === $ctrl.navbarCtrl.activeLink,
+        'oui-navbar-link_primary': $ctrl.variant === 'primary',
+        'oui-navbar-link_secondary': $ctrl.variant === 'secondary',
+        'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
+    }"
     ng-bind="::$ctrl.text"
     ui-sref="{{::$ctrl.getFullSref()}}"
     ui-sref-active="oui-navbar-link_active">
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 38de5155..1ab34d2c 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -38,7 +38,9 @@
 <!-- /Main Links -->
 
 <!-- Aside Links -->
-<ul class="oui-navbar-list oui-navbar-list_aside oui-navbar-list_end" ng-if="::$ctrl.asideLinks">
+<ul class="oui-navbar-list oui-navbar-list_aside oui-navbar-list_end"
+    ng-if="::$ctrl.asideLinks"
+    ng-transclude="asideSlot">
 
     <!-- Internal -->
     <li class="oui-navbar-list__item"
@@ -64,102 +66,17 @@
         </button>
 
         <!-- Notifications Menu -->
-        <div ng-switch-when="notifications"
-            class="oui-navbar-menu oui-navbar-menu_fixed oui-navbar-menu_notifications oui-navbar-menu_right">
-            <header class="oui-navbar-menu__header oui-navbar_mobile-only"
-                ng-if="::!asideLink.headerTemplate">
-                <h3 class="oui-navbar-menu__title" ng-bind="::asideLink.headerTitle || asideLink.title"></h3>
-            </header>
-            <header class="oui-navbar-menu__header"
-                ng-if="::!!asideLink.headerTemplate"
-                ng-bind-html="::asideLink.headerTemplate">
-            </header>
-            <ul class="oui-navbar-menu__body oui-navbar-list">
-                <li class="oui-navbar-menu__item oui-navbar-notification"
-                    ng-repeat="subLink in ::asideLink.subLinks | limitTo: asideLink.limitTo"
-                    ng-class="!!subLink.isActive ? 'oui-navbar-menu__item_active' : null"
-                    oui-navbar-group="{{::asideLink.name}}">
-                    <i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
-                       ng-class=":: {
-                                    'oui-icon_bicolor': subLink.level !== 'incident',
-                                    'oui-icon-error_circle': subLink.level === 'error',
-                                    'oui-icon-success_circle': subLink.level === 'success',
-                                    'oui-icon-info_circle': subLink.level === 'info',
-                                    'oui-icon-warning_circle': subLink.level === 'warning',
-                                    'oui-icon-clock-wait': subLink.level === 'incident'
-                       }"
-                       aria-hidden="true">
-                    </i>
-                    <a class="oui-navbar-notification__content"
-                       ng-click="subLink.linkClicked(subLink);$ctrl.toggleMenu()"
-                       ng-href="{{::subLink.url}}">
-                        <div class="oui-navbar-notification__header">
-                            <span class="oui-navbar-notification__title" ng-bind=":: subLink.subject"></span>
-                            <span class="oui-navbar-notification__time" ng-bind="subLink.time"></span>
-                        </div>
-                        <div class="oui_navbar-notification__body">
-                            <div class="oui-navbar-notification__description" ng-bind-html=":: subLink.description"></div>
-                        </div>
-                    </a>
-                    <button class="oui-navbar-notification__action"
-                            type="button"
-                            ng-click="subLink.actionClicked(subLink)"
-                            oui-tooltip="{{::subLink.isActive ? $ctrl.config.translations.notification.markRead : $ctrl.config.translations.notification.markUnread }}">
-                        <i class="oui-icon oui-icon-shape-dot"
-                           ng-if="subLink.isActive"
-                           aria-hidden="true"></i>
-                        <i class="oui-icon oui-icon-shape-circle"
-                           ng-if="!subLink.isActive"
-                           aria-hidden="true"></i>
-                    </button>
-                </li>
-                <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
-                    ng-if="asideLink.subLinks.length === 0"
-                    oui-navbar-group="{{::asideLink.name}}">
-                    <div class="oui-navbar-notification-placeholder__content">
-                        <i class="oui-icon oui-icon_bicolor oui-icon-success_circle oui-navbar-notification__icon"
-                           aria-hidden="true">
-                        </i>
-                        <div>
-                            <div class="oui-navbar-notification-placeholder__title"
-                                 ng-bind="$ctrl.config.translations.notification.noNotification"></div>
-                            <div class="oui-navbar-notification-placeholder__description"
-                                 ng-bind="$ctrl.config.translations.notification.noNotificationDescription"></div>
-                        </div>
-
-                    </div>
-                </li>
-                <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
-                    ng-if="!asideLink.subLinks"
-                    oui-navbar-group="{{::asideLink.name}}">
-                    <div class="oui-navbar-notification-placeholder__content">
-                        <i class="oui-icon oui-icon_bicolor oui-icon-error_circle oui-navbar-notification__icon"
-                           aria-hidden="true">
-                        </i>
-                        <div>
-                            <div class="oui-navbar-notification-placeholder__title"
-                                 ng-bind="$ctrl.config.translations.notification.errorInNotification"></div>
-                            <div class="oui-navbar-notification-placeholder__description"
-                                 ng-bind="$ctrl.config.translations.notification.errorInNotificationDescription"></div>
-                        </div>
-                    </div>
-                </li>
-            </ul>
-            <footer class="oui-navbar-menu__footer"
-                ng-if="::!asideLink.footerTemplate && !!asideLink.footerTitle">
-                <a class="oui-button oui-button_secondary"
-                    ng-click="$ctrl.toggleMenu()"
-                    ng-href="{{::asideLink.footerUrl}}"
-                    ng-bind="::asideLink.footerTitle"
-                    oui-navbar-group="{{::asideLink.name}}"
-                    oui-navbar-group-last>
-                </a>
-            </footer>
-            <footer class="oui-navbar-menu__footer"
-                ng-if="::!!asideLink.footerTemplate"
-                ng-bind-html="::subLink.footerTemplate">
-            </footer>
-        </div>
+        <oui-navbar-notification ng-switch-when="notifications"
+            class="oui-navbar-menu_fixed oui-navbar-menu_right"
+            name="{{::asideLink.name}}"
+            links="::asideLink.subLinks"
+            limit-to="::asideLink.limitTo"
+            header-template="::asideLink.headerTemplate"
+            header-title="{{::asideLink.headerTitle || asideLink.title}}"
+            footer-template="::asideLink.footerTemplate"
+            footer-title="{{::asideLink.footerTitle}}"
+            footer-url="{{::asideLink.footerUrl}}">
+        </oui-navbar-notification>
         <!-- /Notifications Menu -->
 
         <!-- User Menu -->
diff --git a/packages/oui-navbar/src/notification/navbar-notification.component.js b/packages/oui-navbar/src/notification/navbar-notification.component.js
new file mode 100644
index 00000000..47932149
--- /dev/null
+++ b/packages/oui-navbar/src/notification/navbar-notification.component.js
@@ -0,0 +1,20 @@
+import controller from "./navbar-notification.controller";
+import template from "./navbar-notification.html";
+
+export default {
+    require: {
+        navbarCtrl: "^^ouiNavbar"
+    },
+    bindings: {
+        menuLinks: "<links",
+        menuName: "@name",
+        limitTo: "<?",
+        headerTemplate: "<?",
+        headerTitle: "@",
+        footerTemplate: "<?",
+        footerTitle: "@",
+        footerUrl: "@"
+    },
+    controller,
+    template
+};
diff --git a/packages/oui-navbar/src/notification/navbar-notification.controller.js b/packages/oui-navbar/src/notification/navbar-notification.controller.js
new file mode 100644
index 00000000..7128309d
--- /dev/null
+++ b/packages/oui-navbar/src/notification/navbar-notification.controller.js
@@ -0,0 +1,17 @@
+export default class {
+    constructor ($element, $timeout, ouiNavbarConfiguration) {
+        "ngInject";
+
+        this.$element = $element;
+        this.$timeout = $timeout;
+        this.translations = ouiNavbarConfiguration.translations;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-navbar-menu")
+                .addClass("oui-navbar-menu_notifications")
+        );
+    }
+}
diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html
new file mode 100644
index 00000000..c0214777
--- /dev/null
+++ b/packages/oui-navbar/src/notification/navbar-notification.html
@@ -0,0 +1,96 @@
+<header class="oui-navbar-menu__header oui-navbar_mobile-only"
+    ng-if="::!$ctrl.headerTemplate">
+    <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
+</header>
+<header class="oui-navbar-menu__header"
+    ng-if="::!!$ctrl.headerTemplate"
+    ng-bind-html="::$ctrl.headerTemplate">
+</header>
+<ul class="oui-navbar-menu__body oui-navbar-list">
+    <li class="oui-navbar-menu__item oui-navbar-notification"
+        ng-repeat="menuLink in ::$ctrl.menuLinks | limitTo: $ctrl.limitTo"
+        ng-class="!!menuLink.isActive ? 'oui-navbar-menu__item_active' : null"
+        oui-navbar-group="{{::$ctrl.menuName}}">
+        <i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
+            ng-class=":: {
+                        'oui-icon_bicolor': menuLink.level !== 'incident',
+                        'oui-icon-error_circle': menuLink.level === 'error',
+                        'oui-icon-success_circle': menuLink.level === 'success',
+                        'oui-icon-info_circle': menuLink.level === 'info',
+                        'oui-icon-warning_circle': menuLink.level === 'warning',
+                        'oui-icon-clock-wait': menuLink.level === 'incident'
+            }"
+            aria-hidden="true">
+        </i>
+        <a class="oui-navbar-notification__content"
+            ng-click="menuLink.linkClicked(menuLink);$ctrl.navbarCtrl.toggleMenu()"
+            ng-href="{{::menuLink.url}}">
+            <div class="oui-navbar-notification__header">
+                <span class="oui-navbar-notification__title" ng-bind=":: menuLink.subject"></span>
+                <span class="oui-navbar-notification__time" ng-bind="menuLink.time"></span>
+            </div>
+            <div class="oui_navbar-notification__body">
+                <div class="oui-navbar-notification__description" ng-bind-html=":: menuLink.description"></div>
+            </div>
+        </a>
+        <button class="oui-navbar-notification__action"
+                type="button"
+                ng-click="menuLink.actionClicked(menuLink)"
+                oui-tooltip="{{::menuLink.isActive ?
+                    $ctrl.translations.notification.markRead :
+                    $ctrl.translations.notification.markUnread
+                }}">
+            <i class="oui-icon oui-icon-shape-dot"
+                ng-if="menuLink.isActive"
+                aria-hidden="true"></i>
+            <i class="oui-icon oui-icon-shape-circle"
+                ng-if="!menuLink.isActive"
+                aria-hidden="true"></i>
+        </button>
+    </li>
+    <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
+        ng-if="$ctrl.menuLinks.length === 0"
+        oui-navbar-group="{{::$ctrl.menuName}}">
+        <div class="oui-navbar-notification-placeholder__content">
+            <i class="oui-icon oui-icon_bicolor oui-icon-success_circle oui-navbar-notification__icon"
+                aria-hidden="true">
+            </i>
+            <div>
+                <div class="oui-navbar-notification-placeholder__title"
+                    ng-bind="$ctrl.translations.notification.noNotification"></div>
+                <div class="oui-navbar-notification-placeholder__description"
+                    ng-bind="$ctrl.translations.notification.noNotificationDescription"></div>
+            </div>
+
+        </div>
+    </li>
+    <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
+        ng-if="!$ctrl.menuLinks"
+        oui-navbar-group="{{::$ctrl.menuName}}">
+        <div class="oui-navbar-notification-placeholder__content">
+            <i class="oui-icon oui-icon_bicolor oui-icon-error_circle oui-navbar-notification__icon"
+                aria-hidden="true">
+            </i>
+            <div>
+                <div class="oui-navbar-notification-placeholder__title"
+                        ng-bind="$ctrl.translations.notification.errorInNotification"></div>
+                <div class="oui-navbar-notification-placeholder__description"
+                        ng-bind="$ctrl.translations.notification.errorInNotificationDescription"></div>
+            </div>
+        </div>
+    </li>
+</ul>
+<footer class="oui-navbar-menu__footer"
+    ng-if="::!$ctrl.footerTemplate && !!$ctrl.footerTitle">
+    <a class="oui-button oui-button_secondary"
+        ng-click="$ctrl.toggleMenu()"
+        ng-href="{{::$ctrl.footerUrl}}"
+        ng-bind="::$ctrl.footerTitle"
+        oui-navbar-group="{{::$ctrl.menuName}}"
+        oui-navbar-group-last>
+    </a>
+</footer>
+<footer class="oui-navbar-menu__footer"
+    ng-if="::!!$ctrl.footerTemplate"
+    ng-bind-html="::menuLink.footerTemplate">
+</footer>

From 022225258d4e95ba85736c2d1588e3ddeb00db60 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Wed, 11 Jul 2018 14:44:19 +0200
Subject: [PATCH 04/10] feat(oui-navbar): add dropdown component

---
 .../src/dropdown/navbar-dropdown.component.js | 19 +++++++++++
 .../dropdown/navbar-dropdown.controller.js    | 16 +++++++++
 .../src/dropdown/navbar-dropdown.html         | 18 ++++++++++
 packages/oui-navbar/src/index.js              |  2 ++
 packages/oui-navbar/src/navbar.html           | 34 +++++++------------
 5 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
 create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.controller.js
 create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.html

diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
new file mode 100644
index 00000000..13d1f672
--- /dev/null
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
@@ -0,0 +1,19 @@
+import controller from "./navbar-dropdown.controller";
+import template from "./navbar-dropdown.html";
+
+export default {
+    require: {
+        navbarCtrl: "^^ouiNavbar"
+    },
+    bindings: {
+        name: "@",
+        text: "@",
+        label: "@?ariaLabel",
+        iconBadge: "<?",
+        iconClass: "@?",
+        onClick: "&"
+    },
+    controller,
+    template,
+    transclude: true
+};
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.controller.js b/packages/oui-navbar/src/dropdown/navbar-dropdown.controller.js
new file mode 100644
index 00000000..1d3a1488
--- /dev/null
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.controller.js
@@ -0,0 +1,16 @@
+export default class {
+    constructor ($element, $timeout) {
+        "ngInject";
+
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-navbar-dropdown")
+                .addClass("oui-navbar-list__item")
+        );
+    }
+}
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.html b/packages/oui-navbar/src/dropdown/navbar-dropdown.html
new file mode 100644
index 00000000..117b07fe
--- /dev/null
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.html
@@ -0,0 +1,18 @@
+<button class="oui-navbar-link oui-navbar-link_tertiary" type="button"
+    aria-haspopup="true" aria-expanded="{{!!$ctrl.navbarCtrl.navigation[$ctrl.name]}}"
+    ng-attr-aria-label="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-attr-title="{{::!!$ctrl.label ? $ctrl.label : null}}"
+    ng-class="::!!$ctrl.iconClass ? 'oui-navbar-link_icon' : null"
+    ng-click="$ctrl.navbarCtrl.toggleMenu($ctrl.name); $ctrl.onClick();"
+    oui-navbar-group="{{::$ctrl.name}}">
+    <span class="oui-icon" aria-hidden="true"
+        ng-if="::!!$ctrl.iconClass"
+        ng-class="::'navbar-' + $ctrl.iconClass">
+        <span class="oui-icon__badge"
+            ng-if="!!$ctrl.iconBadge"
+            ng-bind="$ctrl.iconBadge">
+        </span>
+    </span>
+    <span ng-bind="::$ctrl.text"></span>
+</button>
+<div class="oui-navbar-menu__wrapper" ng-transclude></div>
diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js
index 4e66e8b0..133741e8 100644
--- a/packages/oui-navbar/src/index.js
+++ b/packages/oui-navbar/src/index.js
@@ -2,6 +2,7 @@ import KEYBOARD_KEYS from "./keyboard-keys.constant";
 import Navbar from "./navbar.component";
 import NavbarBrand from "./brand/navbar-brand.component";
 import NavbarConfigurationProvider from "./navbar.provider";
+import NavbarDropdown from "./dropdown/navbar-dropdown.component";
 import NavbarGroup from "./group/navbar-group.directive";
 import NavbarGroupService from "./group/navbar-group.service";
 import NavbarLink from "./link/navbar-link.component";
@@ -18,6 +19,7 @@ export default angular
     .constant("KEYBOARD_KEYS", KEYBOARD_KEYS)
     .component("ouiNavbar", Navbar)
     .component("ouiNavbarBrand", NavbarBrand)
+    .component("ouiNavbarDropdown", NavbarDropdown)
     .component("ouiNavbarLink", NavbarLink)
     .component("ouiNavbarMenu", NavbarMenu)
     .component("ouiNavbarNotification", NavbarNotification)
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 1ab34d2c..a3caebb3 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -38,32 +38,21 @@
 <!-- /Main Links -->
 
 <!-- Aside Links -->
-<ul class="oui-navbar-list oui-navbar-list_aside oui-navbar-list_end"
+<div class="oui-navbar-list oui-navbar-list_aside oui-navbar-list_end"
     ng-if="::$ctrl.asideLinks"
     ng-transclude="asideSlot">
 
     <!-- Internal -->
-    <li class="oui-navbar-list__item"
-        ng-repeat="asideLink in $ctrl.asideLinks"
+    <oui-navbar-dropdown
+        name="{{::asideLink.name}}"
+        text="{{::asideLink.title}}"
+        aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
+        icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
+        icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"
+        on-click="asideLink.onClick"
+        ng-repeat="asideLink in ::$ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"
         ng-switch="::asideLink.name">
-        <button class="oui-navbar-link oui-navbar-link_tertiary" type="button"
-            aria-haspopup="true" aria-expanded="{{!!$ctrl.navigation[asideLink.name]}}"
-            ng-attr-aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
-            ng-attr-title="{{::!!asideLink.label ? asideLink.label : null}}"
-            ng-class="::!!asideLink.iconClass ? 'oui-navbar-link_icon' : null"
-            ng-click="$ctrl.toggleMenu(asideLink.name); asideLink.onClick();"
-            oui-navbar-group="{{::asideLink.name}}">
-            <span class="oui-icon" aria-hidden="true"
-                ng-if="::!!asideLink.iconClass"
-                ng-class="::'navbar-' + asideLink.iconClass">
-                <span class="oui-icon__badge"
-                    ng-if="!!asideLink.subLinks && (asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
-                    ng-bind="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length">
-                </span>
-            </span>
-            <span ng-bind="::asideLink.title"></span>
-        </button>
 
         <!-- Notifications Menu -->
         <oui-navbar-notification ng-switch-when="notifications"
@@ -106,9 +95,10 @@
         </oui-navbar-menu>
         <!-- Default Menu -->
 
-    </li>
+    </oui-navbar-dropdown>
+    <!-- /Internal -->
 
-</ul>
+</div>
 <!-- Aside Links -->
 
 <!-- Backdrop -->

From a306291893391149cc80054af1e336211f5a80ec Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Thu, 12 Jul 2018 16:37:25 +0200
Subject: [PATCH 05/10] chore(oui-navbar): update navigation for new components

---
 packages/oui-header-tabs/README.md            |   2 +-
 packages/oui-navbar/README.md                 | 413 ++++++++++++++----
 .../src/brand/navbar-brand.component.js       |   5 +-
 .../menu/navbar-dropdown-menu.component.js    |  25 ++
 .../src/group/navbar-group.controller.js      |  54 ++-
 .../src/group/navbar-group.directive.js       |   3 +
 .../src/group/navbar-group.service.js         |  69 ---
 packages/oui-navbar/src/index.js              |   7 +-
 .../src/menu/navbar-menu.component.js         |   9 +-
 .../src/menu/navbar-menu.controller.js        |  37 +-
 packages/oui-navbar/src/menu/navbar-menu.html |  27 +-
 packages/oui-navbar/src/navbar.controller.js  |  51 ++-
 packages/oui-navbar/src/navbar.html           |  26 +-
 packages/oui-navbar/src/navbar.service.js     |  28 --
 .../navbar-notification.component.js          |   4 +-
 .../navbar-notification.controller.js         |  27 +-
 .../src/notification/navbar-notification.html |  51 ++-
 .../src/toggler/navbar-toggler.component.js   |  10 +-
 .../src/toggler/navbar-toggler.controller.js  |   8 +
 .../src/toggler/navbar-toggler.html           |  10 +-
 20 files changed, 575 insertions(+), 291 deletions(-)
 create mode 100644 packages/oui-navbar/src/dropdown/menu/navbar-dropdown-menu.component.js
 delete mode 100644 packages/oui-navbar/src/group/navbar-group.service.js
 delete mode 100644 packages/oui-navbar/src/navbar.service.js
 create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.controller.js

diff --git a/packages/oui-header-tabs/README.md b/packages/oui-header-tabs/README.md
index 8abb0d32..7e2d249c 100644
--- a/packages/oui-header-tabs/README.md
+++ b/packages/oui-header-tabs/README.md
@@ -92,7 +92,7 @@
 | ----              | ----      | ----      | ----              | ----              | ----      | ----
 | `text`            | string    | @         | yes               |                   |           | display the menu item with this text
 | `href`            | string    | @?        | yes               |                   |           | href of the menu item
-| `state`           | boolean   | @?        | yes               |                   |           | state of the menu item
+| `state`           | string    | @?        | yes               |                   |           | state of the menu item
 | `stateParams`     | object    | <?        |                   |                   |           | state params of the menu item
 | `active`          | boolean   | <?        |                   | `true`, `false`   | `false`   | manual active flag
 | `disabled`        | boolean   | <?        | yes               | `true`, `false`   | `false`   | disabled flag
diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index f1587a96..d111528f 100644
--- a/packages/oui-navbar/README.md
+++ b/packages/oui-navbar/README.md
@@ -4,49 +4,103 @@
 
 ## Usage
 
+### Basic
+
 ```html:preview
 <oui-navbar
+    brand="$ctrl.brand"
     active-link="lorem"
     main-links="$ctrl.mainLinks"
-    aside-links="$ctrl.asideLinks">
-    <oui-navbar-toggler
-        links="$ctrl.togglerLinks">
-    </oui-navbar-toggler>
+    aside-links="$ctrl.asideLinks"
+    toggler-links="$ctrl.togglerLinks">
+</oui-navbar>
+```
+
+### Advanced
+
+```html:preview
+<oui-navbar active-link="lorem">
+    <oui-navbar-toggler links="$ctrl.togglerLinks"></oui-navbar-toggler>
     <oui-navbar-brand
         href="{{$ctrl.brand.url}}"
         aria-label="{{$ctrl.brand.label}}"
-        icon-class="{{$ctrl.brand.iconClass}}">
-    </oui-navbar-brand>
+        icon-class="{{$ctrl.brand.iconClass}}"></oui-navbar-brand>
+    <oui-navbar-main>
+        <oui-navbar-link
+            name="{{mainLink.name}}"
+            text="{{mainLink.title}}"
+            href="{{mainLink.url}}"
+            variant="{{mainLink.isPrimary ? 'primary' : 'secondary'}}"
+            aria-label="{{mainLink.label}}"
+            ng-repeat="mainLink in $ctrl.mainLinks track by $index"></oui-navbar-link>
+    </oui-navbar-main>
+    <oui-navbar-aside>
+        <oui-navbar-dropdown
+            name="{{asideLink.name}}"
+            text="{{asideLink.title}}"
+            aria-label="{{asideLink.label}}"
+            icon-badge="(asideLink.subLinks | filter: {
+                isActive: 'true',
+                acknowledged: '!true'
+            }).length"
+            icon-class="{{asideLink.iconClass}}"
+            on-click="asideLink.onClick"
+            ng-repeat="asideLink in $ctrl.asideLinks track by $index"
+            ng-class="asideLink.class"
+            ng-switch="asideLink.name">
+            <oui-navbar-notification ng-switch-when="notifications"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                limit-to="asideLink.limitTo"
+                header-template="asideLink.headerTemplate"
+                header-title="{{asideLink.title}}"
+                footer-template="asideLink.footerTemplate"
+                footer-title="{{asideLink.footerTitle}}"
+                footer-url="{{asideLink.footerUrl}}"
+                align="end"
+                fixed></oui-navbar-notification>
+            <oui-navbar-menu ng-switch-when="user"
+                header-breadcrumb="{{asideLink.nichandle}}"
+                header-title="{{asideLink.fullName}}"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                align="end"
+                fixed></oui-navbar-menu>
+            <oui-navbar-menu ng-switch-default
+                header-class="oui-navbar_mobile-only"
+                header-breadcrumb="{{asideLink.headerBreadcrumb}}"
+                header-title="{{asideLink.title}}"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                align="end"
+                fixed></oui-navbar-menu>
+        </oui-navbar-dropdown>
+    </oui-navbar-aside>
 </oui-navbar>
 ```
 
-Note: All children menus have `.oui-navbar-menu_fixed`. The component is intended to be used in `fixed` mode. To avoid being hidden by the documentation navbar, this example is not `fixed`.
+### Brand
 
-## API
+#### With attribute `brand`
 
-| Attribute     | Type      | Binding   | One-time Binding    | Values               | Default   | Description                                                                   |
-| ----          | ----      | ----      | ----                | ----                 | ----      | ----                                                                          |
-| brand         | object    | <?        | true                | _see example below_  |           | object for the brand logo of the navbar                                       |
-| active-link   | string    | @?        | true                |                      |           | current active-link of the navbar                                             |
-| main-links    | array     | <?        | true                | _see example below_  |           | array of objects for the items on the left and the toggler (for responsive)   |
-| aside-links   | array     | <?        | true                | _see example below_  |           | array of objects for the items on the right                                   |
-| toggler-links | array     | <?        | true                | _see example below_  |           | array of objects for the responsive menu                                      |
-| fixed         | boolean   | <?        | true                |                      | false     | set the navbar in fixed mode                                                  |
+```html:preview
+<oui-navbar
+    brand="$ctrl.brand">
+</oui-navbar>
+```
 
-### Properties of attribute `brand`
+#### Properties of attribute `brand`
 
-- `label` _(optional)_: define `aria-label` of the brand link.
-- `title`: _(optional)_: define the brand text.
+- `label` **(optional)**: define `aria-label` of the brand link.
+- `title`: **(optional)**: define the brand text.
 - `url`: define `href` of the brand link.
 
-#### Set a brand icon with a CSS class (for `oui-icon`)
+##### Set a brand icon with a CSS class (for `oui-icon`)
 
 - `iconClass`: define `class` of the brand icon.
 
 The brand icon will be set as a `<span>`.
 
-###### Example
-
 ```json
 {
     "label": String,
@@ -56,16 +110,14 @@ The brand icon will be set as a `<span>`.
 }
 ```
 
-#### Set a brand icon with an image
+##### Set a brand icon with an image
 
-- `iconAlt` _(optional)_: define `alt` of the brand icon.
-- `iconClass` _(optional)_: define `class` of the brand icon.
+- `iconAlt` **(optional)**: define `alt` of the brand icon.
+- `iconClass` **(optional)**: define `class` of the brand icon.
 - `iconSrc`: define `src` of the brand icon.
 
 The brand icon will be set as a `<img>`.
 
-###### Example
-
 ```json
 {
     "label": String,
@@ -77,28 +129,39 @@ The brand icon will be set as a `<img>`.
 }
 ```
 
-### Common properties of attributes `*-links`
+#### With component `oui-navbar-brand`
+
+```html:preview
+<oui-navbar>
+    <oui-navbar-brand
+        href="{{$ctrl.brand.url}}"
+        aria-label="{{$ctrl.brand.label}}"
+        icon-class="{{$ctrl.brand.iconClass}}"></oui-navbar-brand>
+</oui-navbar>
+```
+
+### Links
+
+#### Common properties of attributes `*-links`
 
 - `name`: define the navigation name of a menu.
-- `class` _(optional)_: define `class` of the menu item (only used for root links).
-- `label` _(optional)_: define `aria-label` of the menu item.
+- `class` **(optional)**: define `class` of the menu item (only used for root links).
+- `label` **(optional)**: define `aria-label` of the menu item.
 - `title`: define the menu item text.
-- `headerTitle` _(optional)_: define the title of the menu header (default text is `title`).
-- `headerBreadcrumb` _(optional)_: define the breadcrumb of the menu header.
-- `headerTemplate` _(optional)_: define the HTML template of the menu header.
-- `isActive` _(optional)_: define if the menu item has active variant `.oui-navbar-menu__item_active`.
-- `acknowledged` _(optional)_: define if the menu item is acknowledged.
+- `headerTitle` **(optional)**: define the title of the menu header (default text is `title`).
+- `headerBreadcrumb` **(optional)**: define the breadcrumb of the menu header.
+- `headerTemplate` **(optional)**: define the HTML template of the menu header.
+- `isActive` **(optional)**: define if the menu item has active variant `.oui-navbar-menu__item_active`.
+- `acknowledged` **(optional)**: define if the menu item is acknowledged.
 
 If `headerTemplate` is defined, `headerBreadcrumb` and `headerTitle` are not used.
 
-#### Set a menu item as a link
+##### Set a menu item as a link
 
 - `url`: define `href` of the menu item.
 
 The menu item will be set as a `<a>`.
 
-##### Example
-
 ```json
 {
     "name": String,
@@ -109,15 +172,13 @@ The menu item will be set as a `<a>`.
 }
 ```
 
-#### Set a menu item as a link for ui-router
+##### Set a menu item as a link for ui-router
 
 - `state`: define `ui-sref` of the menu item. The menu item will be set as a `<a>`, `click` and `url` will be ignored.
-- `stateParams` _(optional)_: define parameters for `state`.
+- `stateParams` **(optional)**: define parameters for `state`.
 
 The menu item will be set as a `<a>`.
 
-##### Example
-
 ```json
 {
     "name": String,
@@ -129,14 +190,12 @@ The menu item will be set as a `<a>`.
 }
 ```
 
-#### Set a menu item as a button with a click function
+##### Set a menu item as a button with a click function
 
 - `click`: define `ng-click` of the menu item.
 
 The menu item will be set as a `<button>`.
 
-##### Example
-
 ```json
 {
     "name": String,
@@ -147,14 +206,12 @@ The menu item will be set as a `<button>`.
 }
 ```
 
-#### Set a menu item as a button to open a menu
+##### Set a menu item as a button to open a menu
 
 - `subLinks`: define the array of links for the children menu.
 
 The menu item will be set as a `<button>`.
 
-##### Example
-
 ```json
 {
     "name": String,
@@ -167,16 +224,25 @@ The menu item will be set as a `<button>`.
 }
 ```
 
-Note: Root links can have `url` and `subLinks`. `subLinks` will only be used for the responsive menu.
+**Note**: Root links can have `url` and `subLinks`. `subLinks` will only be used for the responsive menu.
+
+### Main Links
+
+#### With attribute `main-links`
+
+```html:preview
+<oui-navbar
+    active-link="lorem"
+    main-links="$ctrl.mainLinks">
+</oui-navbar>
+```
 
-### Properties of attribute `main-links`
+##### Properties of attribute `main-links`
 
 This property is only available for root links of `main-links`.
 
 - `isPrimary`: define if the menu item has primary variant `.oui-navbar-link_primary`, else has secondary variant `.oui-navbar-link_secondary`.
 
-##### Example
-
 ```json
 [{
     "name": String,
@@ -192,14 +258,68 @@ This property is only available for root links of `main-links`.
 }]
 ```
 
-### Properties of attribute `aside-links`
+#### With component `oui-navbar-main`
+
+```html:preview
+<oui-navbar active-link="lorem">
+    <oui-navbar-main>
+        <oui-navbar-link
+            name="{{mainLink.name}}"
+            text="{{mainLink.title}}"
+            href="{{mainLink.url}}"
+            variant="{{mainLink.isPrimary ? 'primary' : 'secondary'}}"
+            aria-label="{{mainLink.label}}"
+            ng-repeat="mainLink in $ctrl.mainLinks track by $index"></oui-navbar-link>
+    </oui-navbar-main>
+</oui-navbar>
+```
+
+### Toggler Links
+
+It defines the menu in reponsive mode. It will be visible only for screen resolutions below `1024px` of width.
+
+#### With attributes `toggler-links`
+
+```html:preview
+<oui-navbar
+    active-link="lorem"
+    toggler-links="$ctrl.togglerLinks">
+</oui-navbar>
+```
+
+**Note**: If there is no `toggler-links` attribute, it will use `main-links` instead to build the toggler menu.
+
+```html:preview
+<oui-navbar
+    active-link="lorem"
+    main-links="$ctrl.mainLinks">
+</oui-navbar>
+```
+
+#### With component `oui-navbar-toggler`
+
+```html:preview
+<oui-navbar active-link="lorem">
+    <oui-navbar-toggler links="$ctrl.togglerLinks"></oui-navbar-toggler>
+</oui-navbar>
+```
+
+### Aside Links
+
+#### With attribute `aside-links`
+
+```html:preview
+<oui-navbar
+    aside-links="$ctrl.asideLinks">
+</oui-navbar>
+```
+
+##### Properties of attribute `aside-links`
 
 This property is only available for root links of `aside-links`.
 
 - `iconClass`: define `class` of the menu item icon.
 
-##### Example
-
 ```json
 [{
     "name": String,
@@ -215,44 +335,67 @@ This property is only available for root links of `aside-links`.
 }]
 ```
 
-#### Variant `notifications` menu
+#### With component `oui-navbar-aside`
+
+```html:preview
+<oui-navbar active-link="lorem">
+    <oui-navbar-aside>
+        <oui-navbar-dropdown
+            name="{{asideLink.name}}"
+            text="{{asideLink.title}}"
+            aria-label="{{asideLink.label}}"
+            icon-badge="(asideLink.subLinks | filter: {
+                isActive: 'true',
+                acknowledged: '!true'
+            }).length"
+            icon-class="{{asideLink.iconClass}}"
+            on-click="asideLink.onClick"
+            ng-repeat="asideLink in $ctrl.asideLinks track by $index"
+            ng-class="asideLink.class"
+            ng-switch="asideLink.name">
+            <oui-navbar-notification ng-switch-when="notifications"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                limit-to="asideLink.limitTo"
+                header-template="asideLink.headerTemplate"
+                header-title="{{asideLink.title}}"
+                footer-template="asideLink.footerTemplate"
+                footer-title="{{asideLink.footerTitle}}"
+                footer-url="{{asideLink.footerUrl}}"
+                align="end"
+                fixed></oui-navbar-notification>
+            <oui-navbar-menu ng-switch-when="user"
+                header-breadcrumb="{{asideLink.nichandle}}"
+                header-title="{{asideLink.fullName}}"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                align="end"
+                fixed></oui-navbar-menu>
+            <oui-navbar-menu ng-switch-default
+                header-class="oui-navbar_mobile-only"
+                header-breadcrumb="{{asideLink.headerBreadcrumb}}"
+                header-title="{{asideLink.title}}"
+                name="{{asideLink.name}}"
+                links="asideLink.subLinks"
+                align="end"
+                fixed></oui-navbar-menu>
+        </oui-navbar-dropdown>
+    </oui-navbar-aside>
+</oui-navbar>
+```
+
+### Variant `notifications` menu
 
 The property `name` **must be** `"notifications"`.
 
 - `template`: define the HTML template in the menu item.
-- `limitTo` _(optional)_: define the maximum of menu links displayed.
+- `limitTo` **(optional)**: define the maximum of menu links displayed.
 - `footerTitle`: define the text of the link in the menu footer.
 - `footerUrl`: define `href` of the link in the menu footer.
-- `footerTemplate` _(optional)_: define the HTML template of the menu footer.
+- `footerTemplate` **(optional)**: define the HTML template of the menu footer.
 
 If `footerTemplate` is defined, `footerTitle` and `footerUrl` are not used.
 
-#### Placeholder for notification
-In the notification submenu, a placeholder is shown depending if there's no notification or if variable `subLinks` is not defined inside an `aside-links`.
-```javascript
-// Something went wong with the notification
-subLinks = undefined;
-// No notification
-subLinks = [];
-```
-```html:preview
-<div class="oui-doc-preview-only-keep-children" style="margin-bottom: 15px;">
-<oui-navbar
-    brand="$ctrl.brand"
-    active-link="lorem"
-    aside-links="$ctrl.placeholderNotification"
-    toggler-links="$ctrl.togglerLinks">
-</oui-navbar>
-</div>
-<oui-radio-toggle-group id="xxxxx" model="$ctrl.placeholderNotification[0].subLinks">
-    <oui-radio text="Error in notification" value="null"></oui-radio>
-    <oui-radio text="No notification" value="[]" default></oui-radio>
-</oui-radio-toggle-group>
-```
-
-
-##### Example
-
 ```json
 {
     "name": "notifications",
@@ -278,15 +421,54 @@ subLinks = [];
 }
 ```
 
-#### Variant `user` menu
+#### Placeholder for notification
+In the notification submenu, a placeholder is shown depending if there's no notification or if variable `subLinks` is not defined inside an `aside-links`.
+```javascript
+// Something went wong with the notification
+subLinks = undefined;
+// No notification
+subLinks = [];
+```
+
+```html:preview
+<div class="oui-doc-preview-only" style="margin-bottom: 15px;">
+<oui-radio-toggle-group id="xxxxx" model="$ctrl.placeholderNotification[0].subLinks">
+    <oui-radio text="Error in notification" value="null"></oui-radio>
+    <oui-radio text="No notification" value="[]" default></oui-radio>
+</oui-radio-toggle-group>
+</div>
+<div class="oui-doc-preview-only-keep-children" style="margin-bottom: 15px;">
+<oui-navbar
+    aside-links="$ctrl.placeholderNotification">
+</oui-navbar>
+</div>
+<div class="oui-doc-preview-only-keep-children" style="margin-bottom: 15px;">
+<oui-navbar>
+    <oui-navbar-aside>
+        <oui-navbar-dropdown
+            name="{{$ctrl.placeholderNotification[0].name}}"
+            text="{{$ctrl.placeholderNotification[0].title}}"
+            icon-class="{{$ctrl.placeholderNotification[0].iconClass}}">
+            <oui-navbar-notification
+                name="{{$ctrl.placeholderNotification[0].name}}"
+                links="$ctrl.placeholderNotification[0].subLinks"
+                limit-to="$ctrl.placeholderNotification[0].limitTo"
+                header-title="{{$ctrl.placeholderNotification[0].title}}"
+                align="end"
+                fixed></oui-navbar-notification>
+        </oui-navbar-dropdown>
+    </oui-navbar-aside>
+</oui-navbar>
+</div>
+```
+
+### Variant `user` menu
 
 The property `name` **must be** `"user"`.
 
 - `nichandle`: Define the nichandle in the menu header.
 - `fullName`: Define the fullname in the menu header.
 
-##### Example
-
 ```json
 {
     "name": "user",
@@ -303,3 +485,60 @@ The property `name` **must be** `"user"`.
     }]
 }
 ```
+
+## API
+
+### oui-navbar
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| `brand`           | object    | <?        | yes               | _see example below_   |           | object for the brand logo of the navbar
+| `active-link`     | string    | @?        | yes               |                       |           | current active-link of the navbar
+| `main-links`      | array     | <?        | yes               | _see example below_   |           | array of objects for the items on the left and the toggler (for responsive)
+| `aside-links`     | array     | <?        | yes               | _see example below_   |           | array of objects for the items on the right
+| `toggler-links`   | array     | <?        | yes               | _see example below_   |           | array of objects for the responsive menu
+| `fixed`           | boolean   | <?        | yes               |                       | `false`   | set the navbar in position fixed
+
+### oui-navbar-brand
+
+| Attribute         | Type      | Binding   | One-time Binding  | Description
+| ----              | ----      |           | ----              | ----
+| `heading`         | string    | @?        | yes               | title of the brand link
+| `aria-label`      | string    | @?        | yes               | accessibility label of the brand link
+| `icon-alt`        | string    | @?        | yes               | alternative text of the brand icon
+| `icon-class`      | string    | @?        | yes               | classname of the brand icon
+| `icon-src`        | string    | @?        | yes               | url of the brand icon
+| `href`            | string    | @?        | yes               | link href of the brand link
+| `state`           | string    | @?        | yes               | state of the brand link
+| `state-params`    | object    | <?        |                   | state params of the brand link
+
+### oui-navbar-dropdown
+
+| Attribute         | Type      | Binding   | One-time Binding  | Description
+| ----              | ----      | ----      | ----              | ----
+| `name`            | string    | @         | yes               | group name of the dropdown
+| `text`            | string    | @         | yes               | text of the button
+| `aria-label`      | string    | @?        | yes               | accessibility label of the button
+| `icon-class`      | string    | @?        | yes               | classname of the button icon
+| `icon-badge`      | number    | <?        |                   | number on the badge of the button icon
+| `on-click`        | function  | &         |                   | click callback
+
+### oui-navbar-menu
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+
+### oui-navbar-notification
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+
+### oui-navbar-toggler
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+
+### oui-navbar-link
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
diff --git a/packages/oui-navbar/src/brand/navbar-brand.component.js b/packages/oui-navbar/src/brand/navbar-brand.component.js
index a1d3f3d2..cc4a3a4e 100644
--- a/packages/oui-navbar/src/brand/navbar-brand.component.js
+++ b/packages/oui-navbar/src/brand/navbar-brand.component.js
@@ -2,13 +2,12 @@ import template from "./navbar-brand.html";
 
 export default {
     bindings: {
-        href: "@",
         heading: "@?",
         ariaLabel: "@?",
-
         iconAlt: "@?",
         iconClass: "@?",
-        iconSrc: "@?"
+        iconSrc: "@?",
+        href: "@?"
     },
     controller: class {
         constructor ($element, $timeout) {
diff --git a/packages/oui-navbar/src/dropdown/menu/navbar-dropdown-menu.component.js b/packages/oui-navbar/src/dropdown/menu/navbar-dropdown-menu.component.js
new file mode 100644
index 00000000..eb2c87f3
--- /dev/null
+++ b/packages/oui-navbar/src/dropdown/menu/navbar-dropdown-menu.component.js
@@ -0,0 +1,25 @@
+export default {
+    bindings: {
+        align: "@?"
+    },
+    controller: class {
+        constructor ($element, $timeout) {
+            "ngInject";
+
+            this.$element = $element;
+            this.$timeout = $timeout;
+        }
+
+        $postLink () {
+            this.$timeout(() => {
+                this.$element
+                    .addClass("oui-navbar-menu")
+                    .addClass("oui-navbar-menu_fixed");
+
+                if (this.align) {
+                    this.$element.addClass(`oui-navbar-menu_${this.align}`);
+                }
+            });
+        }
+    }
+};
diff --git a/packages/oui-navbar/src/group/navbar-group.controller.js b/packages/oui-navbar/src/group/navbar-group.controller.js
index f603a64e..90f38602 100644
--- a/packages/oui-navbar/src/group/navbar-group.controller.js
+++ b/packages/oui-navbar/src/group/navbar-group.controller.js
@@ -1,11 +1,57 @@
 export default class {
-    constructor ($attrs, $element, ouiNavbarConfiguration, NavbarGroupService) {
+    constructor ($attrs, $element, ouiNavbarConfiguration, KEYBOARD_KEYS) {
         "ngInject";
 
         this.$attrs = $attrs;
         this.$element = $element;
         this.config = ouiNavbarConfiguration;
-        this.navbarGroupService = NavbarGroupService;
+
+        this.KEYBOARD_KEYS = KEYBOARD_KEYS;
+    }
+
+    bindGroup (groupName) {
+        const keys = {};
+        const keysRegex = new RegExp([
+            this.KEYBOARD_KEYS.ALT,
+            this.KEYBOARD_KEYS.TAB
+        ].join("|"));
+
+        const tabbableItems = this.navbarCtrl.getGroup(groupName);
+        const lastIndex = tabbableItems.length - 1;
+        const focusElement = (e, groupIndex) => {
+            let index = groupIndex;
+            keys[e.which] = true;
+
+            if (keys[this.KEYBOARD_KEYS.ALT] && !keys[this.KEYBOARD_KEYS.TAB]) {
+                // Move Down
+                index = index >= lastIndex ? 0 : index + 1;
+            } else if (keys[this.KEYBOARD_KEYS.ALT] && keys[this.KEYBOARD_KEYS.TAB]) {
+                // Move Up
+                index = index <= 0 ? lastIndex : index - 1;
+            }
+
+            // Check if element is visible
+            if (tabbableItems[index].clientHeight) {
+                tabbableItems[index].focus();
+            } else {
+                focusElement(e, index);
+            }
+        };
+
+        angular.element(tabbableItems)
+            .on("keydown", (e) => {
+                if (keysRegex.test(e.which) && this.isOpen(groupName)) {
+                    e.preventDefault();
+                    focusElement(e, this.navbarCtrl.getGroup(groupName).indexOf(e.target));
+                }
+            })
+            .on("keyup", (e) => {
+                delete keys[e.which];
+            });
+    }
+
+    isOpen (state) {
+        return this.navbarCtrl.navigation && this.navbarCtrl.navigation[state];
     }
 
     $onInit () {
@@ -16,11 +62,11 @@ export default class {
     }
 
     $postLink () {
-        this.navbarGroupService.addItemToGroup(this.$element[0], this.groupName);
+        this.navbarCtrl.addItemToGroup(this.$element[0], this.groupName);
 
         // Bind items when it's the last item
         if (this.isLast) {
-            this.navbarGroupService.bindGroup(this.groupName);
+            this.bindGroup(this.groupName);
         }
     }
 }
diff --git a/packages/oui-navbar/src/group/navbar-group.directive.js b/packages/oui-navbar/src/group/navbar-group.directive.js
index 54cdbee9..d476a6e2 100644
--- a/packages/oui-navbar/src/group/navbar-group.directive.js
+++ b/packages/oui-navbar/src/group/navbar-group.directive.js
@@ -2,6 +2,9 @@ import controller from "./navbar-group.controller";
 
 export default () => ({
     restrict: "A",
+    require: {
+        navbarCtrl: "^ouiNavbar"
+    },
     bindToController: {
         groupName: "@ouiNavbarGroup",
         isLast: "<?ouiNavbarGroupLast"
diff --git a/packages/oui-navbar/src/group/navbar-group.service.js b/packages/oui-navbar/src/group/navbar-group.service.js
deleted file mode 100644
index d5c18f33..00000000
--- a/packages/oui-navbar/src/group/navbar-group.service.js
+++ /dev/null
@@ -1,69 +0,0 @@
-export default class {
-    constructor ($timeout, NavbarService, KEYBOARD_KEYS) {
-        "ngInject";
-
-        this.$timeout = $timeout;
-        this.navbarService = NavbarService;
-        this.KEYBOARD_KEYS = KEYBOARD_KEYS;
-
-        this.keyboardNav = {};
-    }
-
-    addItemToGroup (item, groupName) {
-        // Create the group if it doesn't exist
-        if (angular.isUndefined(this.keyboardNav[groupName])) {
-            this.keyboardNav[groupName] = [];
-        }
-
-        // Add item to the group
-        this.keyboardNav[groupName].push(item);
-    }
-
-    bindGroup (groupName) {
-        const keys = {};
-        const keysRegex = new RegExp([
-            this.KEYBOARD_KEYS.ALT,
-            this.KEYBOARD_KEYS.TAB
-        ].join("|"));
-
-        const tabbableItems = this.keyboardNav[groupName];
-        const lastIndex = tabbableItems.length - 1;
-        const focusElement = (e, groupIndex) => {
-            let index = groupIndex;
-            keys[e.which] = true;
-
-            if (keys[this.KEYBOARD_KEYS.ALT] && !keys[this.KEYBOARD_KEYS.TAB]) {
-                // Move Down
-                index = index >= lastIndex ? 0 : index + 1;
-            } else if (keys[this.KEYBOARD_KEYS.ALT] && keys[this.KEYBOARD_KEYS.TAB]) {
-                // Move Up
-                index = index <= 0 ? lastIndex : index - 1;
-            }
-
-            // Check if element is visible
-            if (tabbableItems[index].clientHeight) {
-                tabbableItems[index].focus();
-            } else {
-                focusElement(e, index);
-            }
-        };
-
-        angular.element(tabbableItems)
-            .on("keydown", (e) => {
-                if (keysRegex.test(e.which) && this.navbarService.isOpen(groupName)) {
-                    e.preventDefault();
-                    focusElement(e, this.keyboardNav[groupName].indexOf(e.target));
-                }
-            })
-            .on("keyup", (e) => {
-                delete keys[e.which];
-            });
-    }
-
-    // Set focus to an item of a group
-    setFocusTo (groupName, index) {
-        // Add a delay to force focus
-        const delay = 50;
-        this.$timeout(() => this.keyboardNav[groupName][index] && this.keyboardNav[groupName][index].focus(), delay);
-    }
-}
diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js
index 133741e8..99b858bc 100644
--- a/packages/oui-navbar/src/index.js
+++ b/packages/oui-navbar/src/index.js
@@ -1,14 +1,14 @@
 import KEYBOARD_KEYS from "./keyboard-keys.constant";
+
 import Navbar from "./navbar.component";
 import NavbarBrand from "./brand/navbar-brand.component";
 import NavbarConfigurationProvider from "./navbar.provider";
 import NavbarDropdown from "./dropdown/navbar-dropdown.component";
+import NavbarDropdownMenu from "./dropdown/menu/navbar-dropdown-menu.component";
 import NavbarGroup from "./group/navbar-group.directive";
-import NavbarGroupService from "./group/navbar-group.service";
 import NavbarLink from "./link/navbar-link.component";
 import NavbarMenu from "./menu/navbar-menu.component";
 import NavbarNotification from "./notification/navbar-notification.component";
-import NavbarService from "./navbar.service";
 import NavbarToggler from "./toggler/navbar-toggler.component";
 
 export default angular
@@ -20,12 +20,11 @@ export default angular
     .component("ouiNavbar", Navbar)
     .component("ouiNavbarBrand", NavbarBrand)
     .component("ouiNavbarDropdown", NavbarDropdown)
+    .component("ouiNavbarDropdownMenu", NavbarDropdownMenu)
     .component("ouiNavbarLink", NavbarLink)
     .component("ouiNavbarMenu", NavbarMenu)
     .component("ouiNavbarNotification", NavbarNotification)
     .component("ouiNavbarToggler", NavbarToggler)
     .directive("ouiNavbarGroup", NavbarGroup)
     .provider("ouiNavbarConfiguration", NavbarConfigurationProvider)
-    .service("NavbarService", NavbarService)
-    .service("NavbarGroupService", NavbarGroupService)
     .name;
diff --git a/packages/oui-navbar/src/menu/navbar-menu.component.js b/packages/oui-navbar/src/menu/navbar-menu.component.js
index d2e25b66..6cba4db1 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.component.js
+++ b/packages/oui-navbar/src/menu/navbar-menu.component.js
@@ -2,17 +2,18 @@ import controller from "./navbar-menu.controller";
 import template from "./navbar-menu.html";
 
 export default {
+    require: {
+        navbarCtrl: "^^ouiNavbar"
+    },
     bindings: {
         backButton: "<?",
-        childrenClass: "@?",
         headerBreadcrumb: "@?",
         headerClass: "@?",
         headerTitle: "@?",
         menuLinks: "<links",
         menuName: "@name",
-        navigation: "=",
-
-        expanded: "<"
+        align: "@?",
+        fixed: "<?"
     },
     controller,
     template
diff --git a/packages/oui-navbar/src/menu/navbar-menu.controller.js b/packages/oui-navbar/src/menu/navbar-menu.controller.js
index baa4877d..a2bb9e1d 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.controller.js
+++ b/packages/oui-navbar/src/menu/navbar-menu.controller.js
@@ -1,23 +1,19 @@
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
+
 export default class {
-    constructor ($element, $timeout, ouiNavbarConfiguration, NavbarService, NavbarGroupService, KEYBOARD_KEYS) {
+    constructor ($attrs, $element, $timeout, ouiNavbarConfiguration, KEYBOARD_KEYS) {
         "ngInject";
 
+        this.$attrs = $attrs;
         this.$element = $element;
         this.$timeout = $timeout;
         this.config = ouiNavbarConfiguration;
-        this.navbarService = NavbarService;
-        this.navbarGroupService = NavbarGroupService;
         this.KEYBOARD_KEYS = KEYBOARD_KEYS;
     }
 
-    toggleMenu (state, isInternalNav) {
-        // Update navbar navigation
-        this.navigation = this.navbarService.toggleMenu(state, isInternalNav);
-    }
-
     closeMenu (state, isInternalNav) {
         // Update navbar navigation
-        this.navigation = this.navbarService.toggleMenu(state, isInternalNav);
+        this.navbarCtrl.toggleMenu(state, isInternalNav);
 
         // Set focus on menu toggler, preceding $element
         const prev = this.$element[0].previousElementSibling;
@@ -34,7 +30,7 @@ export default class {
         }
 
         // Then close all menus
-        this.navigation = this.navbarService.toggleMenu();
+        this.navbarCtrl.toggleMenu();
     }
 
     // Return value of "ui-sref"
@@ -47,17 +43,8 @@ export default class {
         return this.headerBreadcrumb ? `${this.headerBreadcrumb} › ${this.headerTitle}` : this.headerTitle;
     }
 
-    setFirstFocus () {
-        // Force focus when last is initialized
-        this.navbarGroupService.setFocusTo(this.menuName, 0);
-    }
-
-    $onChanges () {
-        // Focus first list item when opened
-        if (this.expanded) {
-            // Add a little delay to avoid transition bug on Webkit
-            this.navbarGroupService.setFocusTo(this.menuName, 0);
-        }
+    $onInit () {
+        addBooleanParameter(this, "fixed");
     }
 
     $postLink () {
@@ -66,6 +53,14 @@ export default class {
             // Add classnames on root $element
             this.$element.addClass("oui-navbar-menu");
 
+            if (this.fixed) {
+                this.$element.addClass("oui-navbar-menu_fixed");
+            }
+
+            if (this.align) {
+                this.$element.addClass(`oui-navbar-menu_${this.align}`);
+            }
+
             // Add "role" attribute for accessibility
             this.$element.attr("role", "menu");
         });
diff --git a/packages/oui-navbar/src/menu/navbar-menu.html b/packages/oui-navbar/src/menu/navbar-menu.html
index f018f239..e3b4f82d 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.html
+++ b/packages/oui-navbar/src/menu/navbar-menu.html
@@ -15,12 +15,11 @@
     </span>
     <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 </header>
-<ul class="oui-navbar-list" ng-if="::$ctrl.expanded">
+<ul class="oui-navbar-list">
     <li class="oui-navbar-list__item {{::!!menuLink.class ? menuLink.class : null}}"
         ng-repeat="menuLink in ::$ctrl.menuLinks track by $index"
-        ng-class="::{
-            'oui-navbar-menu__item_active': !!menuLink.isActive
-        }">
+        ng-class="::{ 'oui-navbar-menu__item_active': !!menuLink.isActive }"
+        ui-sref-active="oui-navbar-menu__item_active">
 
         <!-- Link (href) -->
         <a class="oui-navbar-link"
@@ -32,9 +31,8 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 'oui-navbar_desktop-only': !!menuLink.subLinks,
                 'oui-navbar-link_external': !!menuLink.isExternal
             }"
-            ng-click="$ctrl.toggleMenu()"
+            ng-click="$ctrl.navbarCtrl.toggleMenu()"
             ng-href="{{::menuLink.url}}"
-            ng-init="::$last && $ctrl.setFirstFocus()"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
             <span ng-bind="::menuLink.title"></span>
@@ -44,7 +42,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         </a>
         <!-- /Link (href) -->
 
-        <!-- /Link (ui-sref) -->
+        <!-- Link (ui-sref) -->
         <a class="oui-navbar-link"
             ng-if="::!!menuLink.state"
             ng-attr-aria-label="{{::!!menuLink.label ? menuLink.label : null}}"
@@ -52,10 +50,9 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-class="::{
                 'oui-navbar_desktop-only': !!menuLink.subLinks
             }"
-            ng-click="$ctrl.toggleMenu()"
+            ng-click="$ctrl.navbarCtrl.toggleMenu()"
             ng-bind="::menuLink.title"
             ui-sref="{{::$ctrl.constructor.getFullSref(menuLink)}}"
-            ng-init="::$last && $ctrl.setFocus()"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
         </a>
@@ -68,7 +65,6 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
             ng-bind="::menuLink.title"
-            ng-init="::$last && $ctrl.setFocus()"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
         </button>
@@ -76,16 +72,15 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 
         <!-- Button for Next Level -->
         <button class="oui-navbar-link" type="button"
-            aria-haspopup="true" aria-expanded="{{!!$ctrl.navigation[menuLink.name]}}"
+            aria-haspopup="true" aria-expanded="{{!!$ctrl.navbarCtrl.navigation[menuLink.name]}}"
             ng-if="::!!menuLink.subLinks && !!menuLink.subLinks.length"
             ng-attr-aria-label="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-class="::{
                 'oui-navbar_mobile-only': !!menuLink.url || !!menuLink.state
             }"
-            ng-click="$ctrl.toggleMenu(menuLink.name, true)"
+            ng-click="$ctrl.navbarCtrl.toggleMenu(menuLink.name, true)"
             ng-bind="::menuLink.title"
-            ng-init="::$last && $ctrl.setFocus()"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
         </button>
@@ -94,15 +89,13 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         <!-- Menu for Next Level -->
         <oui-navbar-menu class="oui-navbar_mobile-only"
             ng-if="::!!menuLink.subLinks && !!menuLink.subLinks.length"
-            ng-class="::!!$ctrl.childrenClass ? $ctrl.childrenClass : null"
-            children-class="{{::$ctrl.childrenClass}}"
             back-button="true"
             header-breadcrumb="{{::menuLink.headerBreadcrumb || $ctrl.getChildBreadcrumb()}}"
             header-title="{{::menuLink.headerTitle || menuLink.title}}"
             name="{{::menuLink.name}}"
             links="::menuLink.subLinks"
-            navigation="$ctrl.navigation"
-            expanded="$ctrl.navigation[menuLink.name]">
+            align="{{::$ctrl.align}}"
+            fixed="::$ctrl.fixed">
         </oui-navbar-menu>
         <!-- Menu for Next Level -->
 
diff --git a/packages/oui-navbar/src/navbar.controller.js b/packages/oui-navbar/src/navbar.controller.js
index b37e4c2c..ee7b2716 100644
--- a/packages/oui-navbar/src/navbar.controller.js
+++ b/packages/oui-navbar/src/navbar.controller.js
@@ -1,7 +1,7 @@
 import { addBooleanParameter } from "@oui-angular/common/component-utils";
 
 export default class {
-    constructor ($attrs, $document, $element, $timeout, ouiNavbarConfiguration, NavbarService, KEYBOARD_KEYS) {
+    constructor ($attrs, $document, $element, $timeout, ouiNavbarConfiguration, KEYBOARD_KEYS) {
         "ngInject";
 
         this.$attrs = $attrs;
@@ -9,13 +9,56 @@ export default class {
         this.$element = $element;
         this.$timeout = $timeout;
         this.config = ouiNavbarConfiguration;
-        this.navbarService = NavbarService;
+
+        this.keyboardNav = {};
         this.KEYBOARD_KEYS = KEYBOARD_KEYS;
     }
 
+    addItemToGroup (item, groupName) {
+        // Create the group if it doesn't exist
+        if (angular.isUndefined(this.keyboardNav[groupName])) {
+            this.keyboardNav[groupName] = [];
+        }
+
+        // Add item to the group
+        this.keyboardNav[groupName].push(item);
+    }
+
+    getGroup (groupName) {
+        return this.keyboardNav[groupName];
+    }
+
+    // Set focus to an item of a group
+    setFocusTo (groupName, index) {
+        // Add a delay to force focus
+        const delay = 50;
+        this.$timeout(() => this.keyboardNav[groupName][index] && this.keyboardNav[groupName][index].focus(), delay);
+    }
+
     toggleMenu (state, isInternalNav) {
-        // Update navbar navigation
-        this.navigation = this.navbarService.toggleMenu(state, isInternalNav);
+        if (state) {
+            // Reset navigation if not internal navigation
+            if (!isInternalNav && (!this.navigation || !this.navigation[state])) {
+                this.navigation = {};
+            }
+
+            if (isInternalNav || !this.navigation[state]) {
+                // Toggle menu if internal navigation or state is undefined
+                this.navigation[state] = !this.navigation[state];
+            } else if (this.navigation[state]) {
+                // Else close all menus
+                this.navigation = null;
+            }
+
+            // Focus first list item when opened
+            if (this.navigation && this.navigation[state]) {
+                // Add a little delay to avoid transition bug on Webkit
+                this.setFocusTo(state, 0);
+            }
+        } else {
+            // Close all menus
+            this.navigation = null;
+        }
     }
 
     updateLinks () {
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index a3caebb3..59c39f16 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -1,7 +1,7 @@
 <!-- Toggler -->
 <div ng-transclude="togglerSlot">
     <oui-navbar-toggler
-        ng-if="::$ctrl.togglerLinks"
+        ng-if="::!!($ctrl.$attrs['togglerLinks'] || !!$ctrl.$attrs['mainLinks'])"
         links="::$ctrl.togglerLinks">
     </oui-navbar-toggler>
 </div>
@@ -10,7 +10,7 @@
 <!-- Brand -->
 <div ng-transclude="brandSlot">
     <oui-navbar-brand
-        ng-if="::$ctrl.brand"
+        ng-if="::!!$ctrl.$attrs['brand']"
         href="{{::$ctrl.brand.url}}"
         heading="{{::$ctrl.brand.title}}"
         aria-label="{{::$ctrl.brand.label}}"
@@ -23,9 +23,9 @@
 
 <!-- Main Links -->
 <div class="oui-navbar-list oui-navbar-list_main oui-navbar_desktop-only"
-    ng-if="::$ctrl.mainLinks"
     ng-transclude="mainSlot">
     <oui-navbar-link
+        ng-if="::!!$ctrl.$attrs['mainLinks']"
         name="{{::managerLink.name}}"
         text="{{::managerLink.title}}"
         href="{{::managerLink.url}}"
@@ -39,18 +39,18 @@
 
 <!-- Aside Links -->
 <div class="oui-navbar-list oui-navbar-list_aside oui-navbar-list_end"
-    ng-if="::$ctrl.asideLinks"
     ng-transclude="asideSlot">
 
     <!-- Internal -->
     <oui-navbar-dropdown
+        ng-if="::!!$ctrl.$attrs['asideLinks']"
         name="{{::asideLink.name}}"
         text="{{::asideLink.title}}"
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
         icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
         icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"
         on-click="asideLink.onClick"
-        ng-repeat="asideLink in ::$ctrl.asideLinks track by $index"
+        ng-repeat="asideLink in $ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"
         ng-switch="::asideLink.name">
 
@@ -58,7 +58,7 @@
         <oui-navbar-notification ng-switch-when="notifications"
             class="oui-navbar-menu_fixed oui-navbar-menu_right"
             name="{{::asideLink.name}}"
-            links="::asideLink.subLinks"
+            links="asideLink.subLinks"
             limit-to="::asideLink.limitTo"
             header-template="::asideLink.headerTemplate"
             header-title="{{::asideLink.headerTitle || asideLink.title}}"
@@ -70,28 +70,24 @@
 
         <!-- User Menu -->
         <oui-navbar-menu ng-switch-when="user"
-            class="oui-navbar-menu_fixed oui-navbar-menu_user oui-navbar-menu_right"
-            children-class="oui-navbar-menu_fixed oui-navbar-menu_right"
             header-breadcrumb="{{::asideLink.nichandle}}"
             header-title="{{::asideLink.fullName}}"
             name="{{::asideLink.name}}"
             links="::asideLink.subLinks"
-            navigation="$ctrl.navigation"
-            expanded="$ctrl.navigation[asideLink.name]">
+            align="end"
+            fixed>
         </oui-navbar-menu>
         <!-- /User Menu -->
 
         <!-- Default Menu -->
         <oui-navbar-menu ng-switch-default
-            class="oui-navbar-menu_fixed oui-navbar-menu_right"
-            children-class="oui-navbar-menu_fixed oui-navbar-menu_right"
             header-class="oui-navbar_mobile-only"
             header-breadcrumb="{{::!!asideLink.headerBreadcrumb ? asideLink.headerBreadcrumb : null}}"
             header-title="{{::asideLink.headerTitle || asideLink.title}}"
             name="{{::asideLink.name}}"
             links="::asideLink.subLinks"
-            navigation="$ctrl.navigation"
-            expanded="$ctrl.navigation[asideLink.name]">
+            align="end"
+            fixed>
         </oui-navbar-menu>
         <!-- Default Menu -->
 
@@ -102,7 +98,7 @@
 <!-- Aside Links -->
 
 <!-- Backdrop -->
-<div class="oui-navbar-backdrop" aria-hidden="true"
+<div class="oui-navbar-backdrop" aria-hidden="true" tabindex="-1"
     ng-class="{ 'oui-navbar-backdrop_active': !!$ctrl.navigation }"
     ng-click="$ctrl.toggleMenu()">
 </div>
diff --git a/packages/oui-navbar/src/navbar.service.js b/packages/oui-navbar/src/navbar.service.js
deleted file mode 100644
index 80c9bf33..00000000
--- a/packages/oui-navbar/src/navbar.service.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default class {
-    isOpen (state) {
-        return this.navigation && this.navigation[state];
-    }
-
-    // Toggle menu from button click
-    toggleMenu (state, isInternalNav) {
-        if (state) {
-            // Reset navigation if not internal navigation
-            if (!isInternalNav && (!this.navigation || !this.navigation[state])) {
-                this.navigation = {};
-            }
-
-            if (isInternalNav || !this.navigation[state]) {
-                // Toggle menu if internal navigation or state is undefined
-                this.navigation[state] = !this.navigation[state];
-            } else if (this.navigation[state]) {
-                // Else close all menus
-                this.navigation = null;
-            }
-        } else {
-            // Close all menus
-            this.navigation = null;
-        }
-
-        return this.navigation;
-    }
-}
diff --git a/packages/oui-navbar/src/notification/navbar-notification.component.js b/packages/oui-navbar/src/notification/navbar-notification.component.js
index 47932149..2cc8d70b 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.component.js
+++ b/packages/oui-navbar/src/notification/navbar-notification.component.js
@@ -13,7 +13,9 @@ export default {
         headerTitle: "@",
         footerTemplate: "<?",
         footerTitle: "@",
-        footerUrl: "@"
+        footerUrl: "@",
+        align: "@?",
+        fixed: "<?"
     },
     controller,
     template
diff --git a/packages/oui-navbar/src/notification/navbar-notification.controller.js b/packages/oui-navbar/src/notification/navbar-notification.controller.js
index 7128309d..1edec8e6 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.controller.js
+++ b/packages/oui-navbar/src/notification/navbar-notification.controller.js
@@ -1,17 +1,36 @@
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
 export default class {
-    constructor ($element, $timeout, ouiNavbarConfiguration) {
+    constructor ($attrs, $element, $timeout, ouiNavbarConfiguration) {
         "ngInject";
 
+        this.$attrs = $attrs;
         this.$element = $element;
         this.$timeout = $timeout;
         this.translations = ouiNavbarConfiguration.translations;
     }
 
+    // Return value of "ui-sref"
+    getFullSref () {
+        return `${this.state}(${JSON.stringify(this.stateParams)})`;
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "fixed");
+    }
+
     $postLink () {
-        this.$timeout(() =>
+        this.$timeout(() => {
             this.$element
                 .addClass("oui-navbar-menu")
-                .addClass("oui-navbar-menu_notifications")
-        );
+                .addClass("oui-navbar-menu_notifications");
+
+            if (this.fixed) {
+                this.$element.addClass("oui-navbar-menu_fixed");
+            }
+
+            if (this.align) {
+                this.$element.addClass(`oui-navbar-menu_${this.align}`);
+            }
+        });
     }
 }
diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html
index c0214777..80b6008d 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.html
+++ b/packages/oui-navbar/src/notification/navbar-notification.html
@@ -9,8 +9,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 <ul class="oui-navbar-menu__body oui-navbar-list">
     <li class="oui-navbar-menu__item oui-navbar-notification"
         ng-repeat="menuLink in ::$ctrl.menuLinks | limitTo: $ctrl.limitTo"
-        ng-class="!!menuLink.isActive ? 'oui-navbar-menu__item_active' : null"
-        oui-navbar-group="{{::$ctrl.menuName}}">
+        ng-class="!!menuLink.isActive ? 'oui-navbar-menu__item_active' : null">
         <i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
             ng-class=":: {
                         'oui-icon_bicolor': menuLink.level !== 'incident',
@@ -22,9 +21,14 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             }"
             aria-hidden="true">
         </i>
+
+        <!-- Link (href) -->
         <a class="oui-navbar-notification__content"
+            ng-if="::!!menuLink.url"
+            ng-init="$ctrl.notificationsCreated = $last"
             ng-click="menuLink.linkClicked(menuLink);$ctrl.navbarCtrl.toggleMenu()"
-            ng-href="{{::menuLink.url}}">
+            ng-href="{{::menuLink.url}}"
+            oui-navbar-group="{{::$ctrl.menuName}}">
             <div class="oui-navbar-notification__header">
                 <span class="oui-navbar-notification__title" ng-bind=":: menuLink.subject"></span>
                 <span class="oui-navbar-notification__time" ng-bind="menuLink.time"></span>
@@ -33,13 +37,32 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 <div class="oui-navbar-notification__description" ng-bind-html=":: menuLink.description"></div>
             </div>
         </a>
+        <!-- /Link (href) -->
+
+        <!-- Link (ui-sref) -->
+        <a class="oui-navbar-notification__content"
+            ng-if="::!!menuLink.state"
+            ng-init="$ctrl.notificationsCreated = $last"
+            ng-click="menuLink.linkClicked(menuLink);$ctrl.navbarCtrl.toggleMenu()"
+            ui-sref="{{::$ctrl.getFullSref()}}"
+            oui-navbar-group="{{::$ctrl.menuName}}">
+            <div class="oui-navbar-notification__header">
+                <span class="oui-navbar-notification__title" ng-bind=":: menuLink.subject"></span>
+                <span class="oui-navbar-notification__time" ng-bind="menuLink.time"></span>
+            </div>
+            <div class="oui_navbar-notification__body">
+                <div class="oui-navbar-notification__description" ng-bind-html=":: menuLink.description"></div>
+            </div>
+        </a>
+        <!-- /Link (ui-sref) -->
+
         <button class="oui-navbar-notification__action"
-                type="button"
-                ng-click="menuLink.actionClicked(menuLink)"
-                oui-tooltip="{{::menuLink.isActive ?
-                    $ctrl.translations.notification.markRead :
-                    $ctrl.translations.notification.markUnread
-                }}">
+            type="button"
+            ng-click="menuLink.actionClicked(menuLink)"
+            oui-tooltip="{{::menuLink.isActive ?
+                $ctrl.translations.notification.markRead :
+                $ctrl.translations.notification.markUnread
+            }}">
             <i class="oui-icon oui-icon-shape-dot"
                 ng-if="menuLink.isActive"
                 aria-hidden="true"></i>
@@ -49,8 +72,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         </button>
     </li>
     <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
-        ng-if="$ctrl.menuLinks.length === 0"
-        oui-navbar-group="{{::$ctrl.menuName}}">
+        ng-if="$ctrl.menuLinks.length === 0">
         <div class="oui-navbar-notification-placeholder__content">
             <i class="oui-icon oui-icon_bicolor oui-icon-success_circle oui-navbar-notification__icon"
                 aria-hidden="true">
@@ -65,8 +87,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         </div>
     </li>
     <li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
-        ng-if="!$ctrl.menuLinks"
-        oui-navbar-group="{{::$ctrl.menuName}}">
+        ng-if="!$ctrl.menuLinks">
         <div class="oui-navbar-notification-placeholder__content">
             <i class="oui-icon oui-icon_bicolor oui-icon-error_circle oui-navbar-notification__icon"
                 aria-hidden="true">
@@ -81,9 +102,9 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
     </li>
 </ul>
 <footer class="oui-navbar-menu__footer"
-    ng-if="::!$ctrl.footerTemplate && !!$ctrl.footerTitle">
+    ng-if="::!$ctrl.footerTemplate && !!$ctrl.footerTitle && $ctrl.notificationsCreated">
     <a class="oui-button oui-button_secondary"
-        ng-click="$ctrl.toggleMenu()"
+        ng-click="$ctrl.navbarCtrl.toggleMenu()"
         ng-href="{{::$ctrl.footerUrl}}"
         ng-bind="::$ctrl.footerTitle"
         oui-navbar-group="{{::$ctrl.menuName}}"
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.component.js b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
index 942f941d..9a4cbff3 100644
--- a/packages/oui-navbar/src/toggler/navbar-toggler.component.js
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.component.js
@@ -1,3 +1,4 @@
+import controller from "./navbar-toggler.controller";
 import template from "./navbar-toggler.html";
 
 export default {
@@ -7,13 +8,6 @@ export default {
     bindings: {
         links: "<"
     },
-    controller: class {
-        $onChanges (changes) {
-            // Get links changes for the loader
-            if (changes.links) {
-                this.loaded = !!changes.links.currentValue;
-            }
-        }
-    },
+    controller,
     template
 };
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.controller.js b/packages/oui-navbar/src/toggler/navbar-toggler.controller.js
new file mode 100644
index 00000000..868da9e8
--- /dev/null
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.controller.js
@@ -0,0 +1,8 @@
+export default class {
+    $onChanges (changes) {
+        // Get links changes for the loader
+        if (changes.links) {
+            this.loaded = !!changes.links.currentValue;
+        }
+    }
+}
diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.html b/packages/oui-navbar/src/toggler/navbar-toggler.html
index b0b8594c..5d260983 100644
--- a/packages/oui-navbar/src/toggler/navbar-toggler.html
+++ b/packages/oui-navbar/src/toggler/navbar-toggler.html
@@ -1,6 +1,6 @@
 <button class="oui-navbar-toggler" type="button"
     aria-haspopup="true" aria-expanded="{{!!$ctrl.navbarCtrl.navigation['toggler']}}"
-    ng-if="::$ctrl.links"
+    ng-if="!!$ctrl.loaded"
     ng-click="$ctrl.navbarCtrl.toggleMenu('toggler')"
     oui-navbar-group="toggler">
     <span class="oui-navbar-toggler__hamburger">
@@ -15,11 +15,9 @@
     <oui-spinner size="s"></oui-spinner>
 </span>
 <oui-navbar-menu
-    ng-if="::$ctrl.links"
-    class="oui-navbar-menu_fixed oui-navbar-menu_toggle"
-    children-class="oui-navbar-menu_fixed"
+    ng-if="!!$ctrl.loaded"
+    class="oui-navbar-menu_toggle"
     name="toggler"
     links="::$ctrl.links"
-    navigation="$ctrl.navbarCtrl.navigation"
-    expanded="$ctrl.navbarCtrl.navigation['toggler']">
+    fixed>
 </oui-navbar-menu>

From 7b3349abd7a157b25a8a6cfddbfb54cfa1ebafc1 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Thu, 19 Jul 2018 16:31:09 +0200
Subject: [PATCH 06/10] chore(oui-navbar): add unit tests

---
 .../oui-navbar/src/brand/navbar-brand.html    |   4 +-
 .../src/group/navbar-group.controller.js      |   8 +-
 packages/oui-navbar/src/index.spec.js         | 416 +++++++++++++++++-
 .../oui-navbar/src/keyboard-keys.constant.js  |   4 +-
 packages/oui-navbar/src/navbar.controller.js  |  19 +-
 packages/oui-navbar/src/navbar.html           |   4 +
 packages/oui-navbar/src/navbar.provider.js    |   6 +-
 .../src/notification/navbar-notification.html |   6 +-
 8 files changed, 446 insertions(+), 21 deletions(-)

diff --git a/packages/oui-navbar/src/brand/navbar-brand.html b/packages/oui-navbar/src/brand/navbar-brand.html
index 731d301d..033841cb 100644
--- a/packages/oui-navbar/src/brand/navbar-brand.html
+++ b/packages/oui-navbar/src/brand/navbar-brand.html
@@ -3,11 +3,11 @@
     ng-attr-title="{{::!!$ctrl.ariaLabel ? $ctrl.ariaLabel : null}}"
     ng-href="{{::$ctrl.href}}">
     <img class="navbar-logo"
-        ng-if="::!!$ctrl.iconSrc"
+        ng-if="!!$ctrl.iconSrc"
         ng-attr-alt="{{::!!$ctrl.iconAlt ? $ctrl.iconAlt : null}}"
         ng-class="::!!$ctrl.iconClass ? $ctrl.iconClass : null"
         ng-src="{{::$ctrl.iconSrc}}">
-    <span ng-if="::!$ctrl.iconSrc"
+    <span ng-if="!$ctrl.iconSrc"
         ng-class="::$ctrl.iconClass">
     </span>
     <span class="oui-navbar__title" ng-if="::$ctrl.heading"
diff --git a/packages/oui-navbar/src/group/navbar-group.controller.js b/packages/oui-navbar/src/group/navbar-group.controller.js
index 90f38602..176afce1 100644
--- a/packages/oui-navbar/src/group/navbar-group.controller.js
+++ b/packages/oui-navbar/src/group/navbar-group.controller.js
@@ -12,8 +12,8 @@ export default class {
     bindGroup (groupName) {
         const keys = {};
         const keysRegex = new RegExp([
-            this.KEYBOARD_KEYS.ALT,
-            this.KEYBOARD_KEYS.TAB
+            this.KEYBOARD_KEYS.TAB,
+            this.KEYBOARD_KEYS.SHIFT
         ].join("|"));
 
         const tabbableItems = this.navbarCtrl.getGroup(groupName);
@@ -22,10 +22,10 @@ export default class {
             let index = groupIndex;
             keys[e.which] = true;
 
-            if (keys[this.KEYBOARD_KEYS.ALT] && !keys[this.KEYBOARD_KEYS.TAB]) {
+            if (keys[this.KEYBOARD_KEYS.TAB] && !keys[this.KEYBOARD_KEYS.SHIFT]) {
                 // Move Down
                 index = index >= lastIndex ? 0 : index + 1;
-            } else if (keys[this.KEYBOARD_KEYS.ALT] && keys[this.KEYBOARD_KEYS.TAB]) {
+            } else if (keys[this.KEYBOARD_KEYS.TAB] && keys[this.KEYBOARD_KEYS.SHIFT]) {
                 // Move Up
                 index = index <= 0 ? lastIndex : index - 1;
             }
diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js
index 8fd210be..c3e67f15 100644
--- a/packages/oui-navbar/src/index.spec.js
+++ b/packages/oui-navbar/src/index.spec.js
@@ -2,29 +2,255 @@ import mockData from "./index.spec.data.json";
 
 describe("ouiNavbar", () => {
     let testUtils;
+    let $document;
+    let $timeout;
+    let configuration;
 
     beforeEach(angular.mock.module("oui.navbar"));
+    beforeEach(angular.mock.module("oui.navbar.configuration"));
     beforeEach(angular.mock.module("oui.test-utils"));
 
-    beforeEach(inject((_TestUtils_) => {
+    beforeEach(inject((_$document_, _$timeout_, _TestUtils_) => {
+        $document = _$document_;
+        $timeout = _$timeout_;
         testUtils = _TestUtils_;
     }));
 
+    describe("Provider", () => {
+        angular.module("oui.navbar.configuration", [
+            "oui.navbar"
+        ]).config(ouiNavbarConfigurationProvider => {
+            ouiNavbarConfigurationProvider.setTranslations({
+                foo: "bar"
+            });
+        });
+
+        beforeEach(inject(_ouiNavbarConfiguration_ => {
+            configuration = _ouiNavbarConfiguration_;
+        }));
+
+        it("should have custom options", () => {
+            expect(configuration.translations.foo).toEqual("bar");
+        });
+    });
+
     describe("Component", () => {
+        const navbarClass = "oui-navbar";
+        const navbarFixedClass = `${navbarClass}_fixed`;
+        const navbarDropdownClass = `${navbarClass}-dropdown`;
+        const navbarMenuClass = `${navbarClass}-menu`;
+        const navbarMenuFixedClass = `${navbarMenuClass}_fixed`;
+        const navbarMenuEndClass = `${navbarMenuClass}_end`;
+        const navbarListItemClass = `${navbarClass}-list__item`;
+
+        it("should display a navbar", () => {
+            const component = testUtils.compileTemplate(`
+                <oui-navbar
+                    brand="$ctrl.brand"
+                    active-link="{{$ctrl.activeLink}}"
+                    main-links="$ctrl.mainLinks"
+                    aside-links="$ctrl.asideLinks"
+                    toggler-links="$ctrl.togglerLinks">
+                </oui-navbar>`, {
+                brand: mockData.brand,
+                activeLink: mockData.mainLinks[0].name,
+                mainLinks: mockData.mainLinks,
+                asideLinks: mockData.asideLinks,
+                togglerLinks: mockData.togglerLinks
+            });
+            const controller = component.controller("ouiNavbar");
+
+            $timeout.flush();
+
+            expect(angular.copy(controller.brand)).toEqual(mockData.brand);
+            expect(angular.copy(controller.activeLink)).toEqual(mockData.mainLinks[0].name);
+            expect(angular.copy(controller.mainLinks)).toEqual(mockData.mainLinks);
+            expect(angular.copy(controller.asideLinks)).toEqual(mockData.asideLinks);
+            expect(angular.copy(controller.togglerLinks)).toEqual(mockData.togglerLinks);
+        });
+
+        describe("Navbar", () => {
+            const item = "foo";
+            const groupName = "bar";
+            const menuName = "lorem";
+            const internalMenuName = "ipsum";
+
+            let component;
+            let controller;
+
+            beforeEach(() => {
+                component = testUtils.compileTemplate("<oui-navbar></oui-navbar>");
+                controller = component.controller("ouiNavbar");
+
+                $timeout.flush();
+            });
+
+            it("should have default classname", () => {
+                expect(component.hasClass(navbarClass)).toBeTruthy();
+                expect(component.hasClass(navbarFixedClass)).toBeFalsy();
+            });
+
+            it("should have role 'navigation'", () => {
+                expect(component.attr("role")).toBe("navigation");
+            });
+
+            it("should add item 'foo' to group 'bar'", () => {
+                controller.addItemToGroup(item, groupName);
+
+                expect(Array.isArray(controller.keyboardNav[groupName])).toBeTruthy();
+                expect(controller.keyboardNav[groupName].length).toBe(1);
+                expect(controller.keyboardNav[groupName][0]).toBe(item);
+            });
+
+            it("should return group 'bar'", () => {
+                controller.addItemToGroup(item, groupName);
+                const group = controller.getGroup(groupName);
+
+                expect(Array.isArray(group)).toBeTruthy();
+                expect(group.length).toBe(1);
+                expect(group[0]).toBe(item);
+            });
+
+            it("should toggle navigation state of Menu 'lorem' ", () => {
+                expect(controller.navigation).toBeUndefined();
+
+                controller.toggleMenu(menuName);
+                expect(controller.navigation[menuName]).toBeTruthy();
+
+                controller.toggleMenu(menuName);
+                expect(controller.navigation).toBeNull();
+            });
+
+            it("should toggle navigation state of internal Menu 'lorem'", () => {
+                controller.toggleMenu(menuName);
+                controller.toggleMenu(internalMenuName, true);
+                expect(controller.navigation[internalMenuName]).toBeTruthy();
+
+                controller.toggleMenu(internalMenuName, true);
+                expect(controller.navigation[internalMenuName]).toBeFalsy();
+            });
+
+            it("should clear navigation", () => {
+                controller.toggleMenu(menuName);
+                controller.toggleMenu(internalMenuName, true);
+                controller.toggleMenu();
+                expect(controller.navigation).toBeNull();
+
+                // Simulate external click
+                controller.toggleMenu(menuName);
+                controller.toggleMenu(internalMenuName, true);
+                $document.triggerHandler("click");
+
+                $timeout.flush();
+                expect(controller.navigation).toBeNull();
+
+                // Simulate ESC keydown
+                controller.toggleMenu(menuName);
+                controller.toggleMenu(internalMenuName, true);
+                $document.triggerHandler({
+                    type: "keydown",
+                    which: controller.KEYBOARD_KEYS.ESC
+                });
+
+                $timeout.flush();
+                expect(controller.navigation).toBeNull();
+            });
+
+            it("should not clear navigation", () => {
+                controller.toggleMenu(menuName);
+                controller.toggleMenu(internalMenuName, true);
+
+                const navigation = controller.navigation;
+                component.triggerHandler("click");
+
+                $timeout.flush();
+                expect(controller.navigation).toEqual(navigation);
+            });
+
+            it("should be fixed", () => {
+                // Test without value, should be true
+                component = testUtils.compileTemplate("<oui-navbar fixed></oui-navbar>");
+                controller = component.controller("ouiNavbar");
+
+                $timeout.flush();
+
+                expect(component.hasClass(navbarFixedClass)).toBeTruthy();
+                expect(controller.fixed).toBeTruthy();
+
+                // Test with value
+                component = testUtils.compileTemplate('<oui-navbar fixed="true"></oui-navbar>');
+                controller = component.controller("ouiNavbar");
+
+                $timeout.flush();
+
+                expect(component.hasClass(navbarFixedClass)).toBeTruthy();
+                expect(controller.fixed).toBeTruthy();
+            });
+
+            it("should not be fixed", () => {
+                component = testUtils.compileTemplate('<oui-navbar fixed="false"></oui-navbar>');
+                controller = component.controller("ouiNavbar");
+
+                $timeout.flush();
+
+                expect(component.hasClass(navbarFixedClass)).toBeFalsy();
+                expect(controller.fixed).toBeFalsy();
+            });
+
+            it("should focus element when menu is opened", () => {
+                const name = mockData.asideLinks[0].name;
+                component = testUtils.compileTemplate('<oui-navbar aside-links="$ctrl.asideLinks"></oui-navbar>', {
+                    asideLinks: mockData.asideLinks
+                });
+                controller = component.controller("ouiNavbar");
+
+                const button = controller.keyboardNav[name][0];
+                spyOn(button, "focus");
+                controller.toggleMenu(name);
+
+                $timeout.flush();
+                expect(button.focus).toHaveBeenCalled();
+            });
+
+            it("should have mainLinks equal togglerLinks", () => {
+                component = testUtils.compileTemplate('<oui-navbar main-links="$ctrl.mainLinks"></oui-navbar>', {
+                    mainLinks: mockData.mainLinks
+                });
+                controller = component.controller("ouiNavbar");
+
+                expect(controller.mainLinks).toEqual(controller.togglerLinks);
+            });
+        });
 
         describe("Brand", () => {
             const data = mockData.brand;
 
-            let component;
             let brand;
+            let component;
+            let controller;
 
             beforeEach(() => {
-                component = testUtils.compileTemplate('<oui-navbar brand="$ctrl.brand"></oui-navbar>', {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-brand
+                            href="{{$ctrl.brand.url}}"
+                            aria-label="{{$ctrl.brand.label}}"
+                            icon-class="{{$ctrl.brand.iconClass}}"></oui-navbar-brand>
+                        <oui-navbar-main>
+                    </oui-navbar>`, {
                     brand: data
                 });
+                controller = component.find("oui-navbar-brand").controller("ouiNavbarBrand");
+
+                $timeout.flush();
+
                 brand = angular.element(component[0].querySelector(".oui-navbar__brand"));
             });
 
+            it("should remove aria-label", () => {
+                expect(controller.$element.attr("aria-label")).toBeUndefined();
+            });
+
             it("should create a link", () => {
                 expect(brand.length).toEqual(1);
                 expect(brand[0].tagName).toBe("A");
@@ -42,6 +268,181 @@ describe("ouiNavbar", () => {
             });
         });
 
+        describe("Dropdown", () => {
+            let component;
+
+            beforeEach(() => {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-aside>
+                            <oui-navbar-dropdown
+                                name="{{$ctrl.name}}"
+                                text="{{$ctrl.title}}"
+                                aria-label="{{$ctrl.label}}"
+                                icon-badge="$ctrl.badge"
+                                icon-class="{{asideLink.icon}}">
+                                <oui-navbar-dropdown-menu
+                                    ng-bind="$ctrl.text">
+                                </oui-navbar-dropdown-menu>
+                            </oui-navbar-dropdown>
+                        <oui-navbar-aside>
+                    </oui-navbar>`, {
+                    name: "foo",
+                    title: "bar",
+                    label: "lorem",
+                    badge: 5,
+                    icon: "oui-icon oui-icon-help_circle",
+                    text: "Lorem ipsum"
+                });
+
+                $timeout.flush();
+            });
+
+            it("should have default classname", () => {
+                const dropdown = component.find("oui-navbar-dropdown");
+                const dropdownMenu = component.find("oui-navbar-dropdown-menu");
+
+                expect(dropdown.hasClass(navbarDropdownClass)).toBeTruthy();
+                expect(dropdown.hasClass(navbarListItemClass)).toBeTruthy();
+
+                expect(dropdownMenu.hasClass(navbarMenuClass)).toBeTruthy();
+                expect(dropdownMenu.hasClass(navbarMenuFixedClass)).toBeTruthy();
+            });
+
+            it("should have content transcluded", () => {
+                const dropdownMenu = component.find("oui-navbar-dropdown-menu");
+
+                expect(dropdownMenu.text()).toBe("Lorem ipsum");
+            });
+
+            it("should have alignment 'end'", () => {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-aside>
+                            <oui-navbar-dropdown
+                                name="{{$ctrl.name}}"
+                                text="{{$ctrl.title}}"
+                                aria-label="{{$ctrl.label}}"
+                                icon-badge="$ctrl.badge"
+                                icon-class="{{asideLink.icon}}">
+                                <oui-navbar-dropdown-menu
+                                    align="end"
+                                    ng-bind="$ctrl.text">
+                                </oui-navbar-dropdown-menu>
+                            </oui-navbar-dropdown>
+                        <oui-navbar-aside>
+                    </oui-navbar>`, {
+                    name: "foo",
+                    title: "bar",
+                    label: "lorem",
+                    badge: 5,
+                    icon: "oui-icon oui-icon-help_circle",
+                    text: "Lorem ipsum"
+                });
+                const dropdownMenu = component.find("oui-navbar-dropdown-menu");
+
+                $timeout.flush();
+
+                expect(dropdownMenu.hasClass(navbarMenuEndClass)).toBeTruthy();
+            });
+        });
+
+        describe("Menu", () => {
+            const data = mockData.asideLinks[0];
+
+            let component;
+            let menu;
+
+            beforeEach(() => {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-aside>
+                            <oui-navbar-dropdown
+                                name="{{$ctrl.name}}"
+                                text="{{$ctrl.title}}">
+                                <oui-navbar-menu
+                                    name="{{$ctrl.name}}"
+                                    links="$ctrl.subLinks">
+                                </oui-navbar-menu>
+                            </oui-navbar-dropdown>
+                        <oui-navbar-aside>
+                    </oui-navbar>`, {
+                    name: data.name,
+                    title: data.title,
+                    headerTitle: data.headerTitle,
+                    subLinks: data.subLinks
+                });
+
+                $timeout.flush();
+
+                menu = component.find("oui-navbar-menu");
+            });
+
+            it("should have default classname", () => {
+                expect(menu.hasClass(navbarMenuClass)).toBeTruthy();
+                expect(menu.hasClass(navbarMenuFixedClass)).toBeFalsy();
+                expect(menu.hasClass(navbarMenuEndClass)).toBeFalsy();
+            });
+
+            it("should have role 'menu'", () => {
+                expect(menu.attr("role")).toBe("menu");
+            });
+
+            it("should have alignment", () => {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-aside>
+                            <oui-navbar-dropdown
+                                name="{{$ctrl.name}}"
+                                text="{{$ctrl.title}}">
+                                <oui-navbar-menu
+                                    name="{{$ctrl.name}}"
+                                    links="$ctrl.subLinks"
+                                    align="end">
+                                </oui-navbar-menu>
+                            </oui-navbar-dropdown>
+                        <oui-navbar-aside>
+                    </oui-navbar>`, {
+                    name: data.name,
+                    title: data.title,
+                    headerTitle: data.headerTitle,
+                    subLinks: data.subLinks
+                });
+
+                $timeout.flush();
+
+                menu = component.find("oui-navbar-menu");
+                expect(menu.hasClass(navbarMenuEndClass)).toBeTruthy();
+            });
+
+            it("should be fixed", () => {
+                component = testUtils.compileTemplate(`
+                    <oui-navbar>
+                        <oui-navbar-aside>
+                            <oui-navbar-dropdown
+                                name="{{$ctrl.name}}"
+                                text="{{$ctrl.title}}">
+                                <oui-navbar-menu
+                                    name="{{$ctrl.name}}"
+                                    links="$ctrl.subLinks"
+                                    fixed>
+                                </oui-navbar-menu>
+                            </oui-navbar-dropdown>
+                        <oui-navbar-aside>
+                    </oui-navbar>`, {
+                    name: data.name,
+                    title: data.title,
+                    headerTitle: data.headerTitle,
+                    subLinks: data.subLinks
+                });
+
+                $timeout.flush();
+
+                menu = component.find("oui-navbar-menu");
+                expect(menu.hasClass(navbarMenuFixedClass)).toBeTruthy();
+            });
+        });
+
         describe("Main links", () => {
             const data = mockData.mainLinks;
             const activeIndex = 0;
@@ -55,6 +456,8 @@ describe("ouiNavbar", () => {
                     mainLinks: data
                 });
 
+                $timeout.flush();
+
                 menu = angular.element(component[0].querySelector(".oui-navbar-list_main"));
                 links = menu.children("li");
             });
@@ -98,6 +501,9 @@ describe("ouiNavbar", () => {
                 component = testUtils.compileTemplate('<oui-navbar aside-links="$ctrl.asideLinks"></oui-navbar>', {
                     asideLinks: data
                 });
+
+                $timeout.flush();
+
                 menu = angular.element(component[0].querySelector(".oui-navbar-list_aside"));
                 links = menu.children("li");
             });
@@ -154,6 +560,8 @@ describe("ouiNavbar", () => {
                     togglerLinks: data
                 });
 
+                $timeout.flush();
+
                 toggler = angular.element(component[0].querySelector(".oui-navbar-toggler"));
                 responsiveMenu = angular.element(component[0].querySelector(".oui-navbar-menu_toggle"));
             });
@@ -185,6 +593,8 @@ describe("ouiNavbar", () => {
                     mainLinks: data
                 });
 
+                $timeout.flush();
+
                 backdrop = angular.element(component[0].querySelector(".oui-navbar-backdrop"));
                 toggler = angular.element(component[0].querySelector(".oui-navbar-toggler"));
             });
diff --git a/packages/oui-navbar/src/keyboard-keys.constant.js b/packages/oui-navbar/src/keyboard-keys.constant.js
index 7a757d5e..88461f3f 100644
--- a/packages/oui-navbar/src/keyboard-keys.constant.js
+++ b/packages/oui-navbar/src/keyboard-keys.constant.js
@@ -1,5 +1,5 @@
 export default {
-    ALT: 9,
-    TAB: 16,
+    TAB: 9,
+    SHIFT: 16,
     ESC: 27
 };
diff --git a/packages/oui-navbar/src/navbar.controller.js b/packages/oui-navbar/src/navbar.controller.js
index ee7b2716..5d73efeb 100644
--- a/packages/oui-navbar/src/navbar.controller.js
+++ b/packages/oui-navbar/src/navbar.controller.js
@@ -32,7 +32,11 @@ export default class {
     setFocusTo (groupName, index) {
         // Add a delay to force focus
         const delay = 50;
-        this.$timeout(() => this.keyboardNav[groupName][index] && this.keyboardNav[groupName][index].focus(), delay);
+        this.$timeout(() => {
+            if (this.keyboardNav && this.keyboardNav[groupName] && this.keyboardNav[groupName][index]) {
+                this.keyboardNav[groupName][index].focus();
+            }
+        }, delay);
     }
 
     toggleMenu (state, isInternalNav) {
@@ -61,25 +65,28 @@ export default class {
         }
     }
 
-    updateLinks () {
+    $onInit () {
         // If no togglerLinks attribute, we use the value of mainLinks
         if (!angular.isDefined(this.$attrs.togglerLinks) && angular.isDefined(this.$attrs.mainLinks)) {
             this.togglerLinks = this.mainLinks;
         }
-    }
-
-    $onInit () {
-        this.updateLinks();
 
         // Support presence of attribute 'fixed'
         addBooleanParameter(this, "fixed");
     }
 
+    $onDestroy () {
+        this.$document
+            .off("click")
+            .off("keydown");
+    }
+
     $postLink () {
         // Avoid $element DOM unsync for jqLite methods
         this.$timeout(() => {
             // Add Classname on root element
             this.$element.addClass("oui-navbar");
+
             if (this.fixed) {
                 this.$element.addClass("oui-navbar_fixed");
             }
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 59c39f16..a0a187b2 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -57,6 +57,7 @@
         <!-- Notifications Menu -->
         <oui-navbar-notification ng-switch-when="notifications"
             class="oui-navbar-menu_fixed oui-navbar-menu_right"
+            ng-class="::!!asideLink.class ? asideLink.class : null"
             name="{{::asideLink.name}}"
             links="asideLink.subLinks"
             limit-to="::asideLink.limitTo"
@@ -70,6 +71,8 @@
 
         <!-- User Menu -->
         <oui-navbar-menu ng-switch-when="user"
+            class="oui-navbar-menu_user"
+            ng-class="::!!asideLink.class ? asideLink.class : null"
             header-breadcrumb="{{::asideLink.nichandle}}"
             header-title="{{::asideLink.fullName}}"
             name="{{::asideLink.name}}"
@@ -81,6 +84,7 @@
 
         <!-- Default Menu -->
         <oui-navbar-menu ng-switch-default
+            ng-class="::!!asideLink.class ? asideLink.class : null"
             header-class="oui-navbar_mobile-only"
             header-breadcrumb="{{::!!asideLink.headerBreadcrumb ? asideLink.headerBreadcrumb : null}}"
             header-title="{{::asideLink.headerTitle || asideLink.title}}"
diff --git a/packages/oui-navbar/src/navbar.provider.js b/packages/oui-navbar/src/navbar.provider.js
index 1e30df34..c9b4b4e9 100644
--- a/packages/oui-navbar/src/navbar.provider.js
+++ b/packages/oui-navbar/src/navbar.provider.js
@@ -1,3 +1,5 @@
+import { merge } from "lodash";
+
 export default class {
     constructor () {
         this.translations = {
@@ -13,11 +15,11 @@ export default class {
     }
 
     /**
-     * Set the translations for the navbar component
+     * Set the translations
      * @param {Object} translations a map of translations
      */
     setTranslations (translations) {
-        this.translations = translations;
+        this.translations = merge(this.translations, translations);
         return this;
     }
 
diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html
index 80b6008d..f2dfb2ed 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.html
+++ b/packages/oui-navbar/src/notification/navbar-notification.html
@@ -28,7 +28,8 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-init="$ctrl.notificationsCreated = $last"
             ng-click="menuLink.linkClicked(menuLink);$ctrl.navbarCtrl.toggleMenu()"
             ng-href="{{::menuLink.url}}"
-            oui-navbar-group="{{::$ctrl.menuName}}">
+            oui-navbar-group="{{::$ctrl.menuName}}"
+            oui-navbar-group-last="::$last && !$ctrl.footerTemplate && !$ctrl.footerTitle">
             <div class="oui-navbar-notification__header">
                 <span class="oui-navbar-notification__title" ng-bind=":: menuLink.subject"></span>
                 <span class="oui-navbar-notification__time" ng-bind="menuLink.time"></span>
@@ -45,7 +46,8 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-init="$ctrl.notificationsCreated = $last"
             ng-click="menuLink.linkClicked(menuLink);$ctrl.navbarCtrl.toggleMenu()"
             ui-sref="{{::$ctrl.getFullSref()}}"
-            oui-navbar-group="{{::$ctrl.menuName}}">
+            oui-navbar-group="{{::$ctrl.menuName}}"
+            oui-navbar-group-last="::$last && !$ctrl.footerTemplate && !$ctrl.footerTitle">
             <div class="oui-navbar-notification__header">
                 <span class="oui-navbar-notification__title" ng-bind=":: menuLink.subject"></span>
                 <span class="oui-navbar-notification__time" ng-bind="menuLink.time"></span>

From fdda969b3c72bae281813afae3533735946b9346 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Fri, 20 Jul 2018 15:36:49 +0200
Subject: [PATCH 07/10] chore: code review

---
 packages/oui-navbar/README.md                 | 140 ++++++++++--------
 .../src/link/navbar-link.component.js         |   2 +-
 .../src/menu/navbar-menu.controller.js        |   1 +
 packages/oui-navbar/src/menu/navbar-menu.html |   4 +-
 packages/oui-navbar/src/navbar.html           |   2 +-
 .../navbar-notification.component.js          |   8 +-
 .../navbar-notification.controller.js         |   5 +-
 .../src/notification/navbar-notification.html |  18 +--
 8 files changed, 104 insertions(+), 76 deletions(-)

diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index d111528f..eb8f3eba 100644
--- a/packages/oui-navbar/README.md
+++ b/packages/oui-navbar/README.md
@@ -56,7 +56,7 @@
                 header-title="{{asideLink.title}}"
                 footer-template="asideLink.footerTemplate"
                 footer-title="{{asideLink.footerTitle}}"
-                footer-url="{{asideLink.footerUrl}}"
+                footer-href="{{asideLink.footerUrl}}"
                 align="end"
                 fixed></oui-navbar-notification>
             <oui-navbar-menu ng-switch-when="user"
@@ -79,9 +79,9 @@
 </oui-navbar>
 ```
 
-### Brand
+## Brand
 
-#### With attribute `brand`
+### With attribute `brand`
 
 ```html:preview
 <oui-navbar
@@ -89,13 +89,13 @@
 </oui-navbar>
 ```
 
-#### Properties of attribute `brand`
+### Properties of attribute `brand`
 
 - `label` **(optional)**: define `aria-label` of the brand link.
 - `title`: **(optional)**: define the brand text.
 - `url`: define `href` of the brand link.
 
-##### Set a brand icon with a CSS class (for `oui-icon`)
+#### Set a brand icon with a CSS class (for `oui-icon`)
 
 - `iconClass`: define `class` of the brand icon.
 
@@ -110,7 +110,7 @@ The brand icon will be set as a `<span>`.
 }
 ```
 
-##### Set a brand icon with an image
+#### Set a brand icon with an image
 
 - `iconAlt` **(optional)**: define `alt` of the brand icon.
 - `iconClass` **(optional)**: define `class` of the brand icon.
@@ -129,7 +129,7 @@ The brand icon will be set as a `<img>`.
 }
 ```
 
-#### With component `oui-navbar-brand`
+### With component `oui-navbar-brand`
 
 ```html:preview
 <oui-navbar>
@@ -140,9 +140,9 @@ The brand icon will be set as a `<img>`.
 </oui-navbar>
 ```
 
-### Links
+## Links
 
-#### Common properties of attributes `*-links`
+### Common properties of attributes `*-links`
 
 - `name`: define the navigation name of a menu.
 - `class` **(optional)**: define `class` of the menu item (only used for root links).
@@ -156,7 +156,7 @@ The brand icon will be set as a `<img>`.
 
 If `headerTemplate` is defined, `headerBreadcrumb` and `headerTitle` are not used.
 
-##### Set a menu item as a link
+#### Set a menu item as a link
 
 - `url`: define `href` of the menu item.
 
@@ -172,7 +172,7 @@ The menu item will be set as a `<a>`.
 }
 ```
 
-##### Set a menu item as a link for ui-router
+#### Set a menu item as a link for ui-router
 
 - `state`: define `ui-sref` of the menu item. The menu item will be set as a `<a>`, `click` and `url` will be ignored.
 - `stateParams` **(optional)**: define parameters for `state`.
@@ -190,7 +190,7 @@ The menu item will be set as a `<a>`.
 }
 ```
 
-##### Set a menu item as a button with a click function
+#### Set a menu item as a button with a click function
 
 - `click`: define `ng-click` of the menu item.
 
@@ -206,7 +206,7 @@ The menu item will be set as a `<button>`.
 }
 ```
 
-##### Set a menu item as a button to open a menu
+#### Set a menu item as a button to open a menu
 
 - `subLinks`: define the array of links for the children menu.
 
@@ -226,9 +226,9 @@ The menu item will be set as a `<button>`.
 
 **Note**: Root links can have `url` and `subLinks`. `subLinks` will only be used for the responsive menu.
 
-### Main Links
+## Main Links
 
-#### With attribute `main-links`
+### With attribute `main-links`
 
 ```html:preview
 <oui-navbar
@@ -237,7 +237,7 @@ The menu item will be set as a `<button>`.
 </oui-navbar>
 ```
 
-##### Properties of attribute `main-links`
+#### Properties of attribute `main-links`
 
 This property is only available for root links of `main-links`.
 
@@ -258,7 +258,7 @@ This property is only available for root links of `main-links`.
 }]
 ```
 
-#### With component `oui-navbar-main`
+### With component `oui-navbar-main`
 
 ```html:preview
 <oui-navbar active-link="lorem">
@@ -274,11 +274,11 @@ This property is only available for root links of `main-links`.
 </oui-navbar>
 ```
 
-### Toggler Links
+## Toggler Links
 
 It defines the menu in reponsive mode. It will be visible only for screen resolutions below `1024px` of width.
 
-#### With attributes `toggler-links`
+### With attributes `toggler-links`
 
 ```html:preview
 <oui-navbar
@@ -296,7 +296,7 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 </oui-navbar>
 ```
 
-#### With component `oui-navbar-toggler`
+### With component `oui-navbar-toggler`
 
 ```html:preview
 <oui-navbar active-link="lorem">
@@ -304,9 +304,9 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 </oui-navbar>
 ```
 
-### Aside Links
+## Aside Links
 
-#### With attribute `aside-links`
+### With attribute `aside-links`
 
 ```html:preview
 <oui-navbar
@@ -314,7 +314,7 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 </oui-navbar>
 ```
 
-##### Properties of attribute `aside-links`
+#### Properties of attribute `aside-links`
 
 This property is only available for root links of `aside-links`.
 
@@ -335,7 +335,7 @@ This property is only available for root links of `aside-links`.
 }]
 ```
 
-#### With component `oui-navbar-aside`
+### With component `oui-navbar-aside`
 
 ```html:preview
 <oui-navbar active-link="lorem">
@@ -361,7 +361,7 @@ This property is only available for root links of `aside-links`.
                 header-title="{{asideLink.title}}"
                 footer-template="asideLink.footerTemplate"
                 footer-title="{{asideLink.footerTitle}}"
-                footer-url="{{asideLink.footerUrl}}"
+                footer-href="{{asideLink.footerUrl}}"
                 align="end"
                 fixed></oui-navbar-notification>
             <oui-navbar-menu ng-switch-when="user"
@@ -384,7 +384,7 @@ This property is only available for root links of `aside-links`.
 </oui-navbar>
 ```
 
-### Variant `notifications` menu
+## Variant `notifications` menu
 
 The property `name` **must be** `"notifications"`.
 
@@ -421,7 +421,7 @@ If `footerTemplate` is defined, `footerTitle` and `footerUrl` are not used.
 }
 ```
 
-#### Placeholder for notification
+### Placeholder for notification
 In the notification submenu, a placeholder is shown depending if there's no notification or if variable `subLinks` is not defined inside an `aside-links`.
 ```javascript
 // Something went wong with the notification
@@ -462,7 +462,7 @@ subLinks = [];
 </div>
 ```
 
-### Variant `user` menu
+## Variant `user` menu
 
 The property `name` **must be** `"user"`.
 
@@ -492,53 +492,77 @@ The property `name` **must be** `"user"`.
 
 | Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
 | ----              | ----      | ----      | ----              | ----                  | ----      | ----
-| `brand`           | object    | <?        | yes               | _see example below_   |           | object for the brand logo of the navbar
+| `brand`           | object    | <?        | yes               | _see example above_   |           | object for the brand logo of the navbar
 | `active-link`     | string    | @?        | yes               |                       |           | current active-link of the navbar
-| `main-links`      | array     | <?        | yes               | _see example below_   |           | array of objects for the items on the left and the toggler (for responsive)
-| `aside-links`     | array     | <?        | yes               | _see example below_   |           | array of objects for the items on the right
-| `toggler-links`   | array     | <?        | yes               | _see example below_   |           | array of objects for the responsive menu
+| `main-links`      | array     | <?        | yes               | _see example above_   |           | array of objects for the items on the left and the toggler (for responsive)
+| `aside-links`     | array     | <?        | yes               | _see example above_   |           | array of objects for the items on the right
+| `toggler-links`   | array     | <?        | yes               | _see example above_   |           | array of objects for the responsive menu
 | `fixed`           | boolean   | <?        | yes               |                       | `false`   | set the navbar in position fixed
 
 ### oui-navbar-brand
 
-| Attribute         | Type      | Binding   | One-time Binding  | Description
-| ----              | ----      |           | ----              | ----
-| `heading`         | string    | @?        | yes               | title of the brand link
-| `aria-label`      | string    | @?        | yes               | accessibility label of the brand link
-| `icon-alt`        | string    | @?        | yes               | alternative text of the brand icon
-| `icon-class`      | string    | @?        | yes               | classname of the brand icon
-| `icon-src`        | string    | @?        | yes               | url of the brand icon
-| `href`            | string    | @?        | yes               | link href of the brand link
-| `state`           | string    | @?        | yes               | state of the brand link
-| `state-params`    | object    | <?        |                   | state params of the brand link
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      |           | ----              | ----                  | ----      | ----
+| `heading`         | string    | @?        | yes               |                       |           | title of the brand link
+| `aria-label`      | string    | @?        | yes               |                       |           | accessibility label of the brand link
+| `icon-alt`        | string    | @?        | yes               |                       |           | alternative text of the brand icon
+| `icon-class`      | string    | @?        | yes               |                       |           | classname of the brand icon
+| `icon-src`        | string    | @?        | yes               |                       |           | url of the brand icon
+| `href`            | string    | @?        | yes               |                       |           | link href of the brand link
 
 ### oui-navbar-dropdown
 
-| Attribute         | Type      | Binding   | One-time Binding  | Description
-| ----              | ----      | ----      | ----              | ----
-| `name`            | string    | @         | yes               | group name of the dropdown
-| `text`            | string    | @         | yes               | text of the button
-| `aria-label`      | string    | @?        | yes               | accessibility label of the button
-| `icon-class`      | string    | @?        | yes               | classname of the button icon
-| `icon-badge`      | number    | <?        |                   | number on the badge of the button icon
-| `on-click`        | function  | &         |                   | click callback
+| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| `name`            | string    | @         | yes               |                       |           | group name of the dropdown
+| `text`            | string    | @         | yes               |                       |           | text of the button
+| `aria-label`      | string    | @?        | yes               |                       |           | accessibility label of the button
+| `icon-class`      | string    | @?        | yes               |                       |           | classname of the button icon
+| `icon-badge`      | number    | <?        |                   |                       |           | number on the badge of the button icon
+| `on-click`        | function  | &         |                   |                       |           | click callback
 
 ### oui-navbar-menu
 
-| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
-| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| Attribute             | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----                  | ----      | ----      | ----              | ----                  | ----      | ----
+| `name`                | string    | @         | yes               |                       |           | group name of the menu
+| `links`               | array     | <         | yes               | _see example above_   |           | array of links for the menu
+| `header-class`        | string    | @?        | yes               |                       |           | classname of the header
+| `header-title`        | string    | @?        | yes               |                       |           | text of the header title
+| `header-breadcrumb`   | string    | @?        | yes               |                       |           | text of the header breadcrumb
+| `align`               | string    | @?        | yes               | `start`, `end`        | `start`   | alignment of the menu to his trigger
+| `back-button`         | boolean   | <?        | yes               |                       | `false`   | display a back button in the header title
+| `fixed`               | boolean   | <?        | yes               |                       | `false`   | flag for responsive menu
 
 ### oui-navbar-notification
 
-| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
-| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| Attribute             | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----                  | ----      | ----      | ----              | ----                  | ----      | ----
+| `name`                | string    | @         | yes               |                       |           | group name of the menu
+| `links`               | array     | <         | yes               | _see example above_   |           | array of links for the notifications menu
+| `limit-to`            | number    | <?        | yes               |                       | 10        | maximum displayed notifications
+| `header-template`     | string    | <?        | yes               |                       |           | HTML template of the menu header
+| `header-title`        | string    | @?        | yes               |                       |           | text of the header title
+| `footer-template`     | string    | <?        | yes               |                       |           | HTML template of the menu footer
+| `footer-title`        | string    | @?        | yes               |                       |           | text of the footer link
+| `footer-href`         | string    | @?        | yes               |                       |           | url of the footer link
+| `align`               | string    | @?        | yes               | `start`, `end`        | `start`   | alignment of the menu to his trigger
+| `fixed`               | boolean   | <?        | yes               |                       | `false`   | flag for responsive menu
 
 ### oui-navbar-toggler
 
-| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
-| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| Attribute     | Type      | Binding   | One-time Binding  | Values                | Default   | Description
+| ----          | ----      | ----      | ----              | ----                  | ----      | ----
+| `links`       | array     | <         | yes               | _see example above_   |           | array of links for the responsive menu
 
 ### oui-navbar-link
 
-| Attribute         | Type      | Binding   | One-time Binding  | Values                | Default   | Description
-| ----              | ----      | ----      | ----              | ----                  | ----      | ----
+| Attribute         | Type      | Binding   | One-time Binding  | Values                                | Default   | Description
+| ----              | ----      | ----      | ----              | ----                                  | ----      | ----
+| `name`            | string    | @         | yes               |                                       |           | group name of the link
+| `text`            | string    | @         | yes               |                                       |           | text of the link
+| `aria-label`      | string    | @?        | yes               |                                       |           | accessibility label of the link
+| `href`            | string    | @?        | yes               |                                       |           | href of the link
+| `state`           | string    | @?        | yes               |                                       |           | state of the link
+| `state-params`    | object    | <?        | yes               |                                       |           | state-params of the link
+| `variant`         | string    | @?        | yes               | `primary`, `secondary`, `tertiary`    |           | style modifier of the link
diff --git a/packages/oui-navbar/src/link/navbar-link.component.js b/packages/oui-navbar/src/link/navbar-link.component.js
index 39bc74bd..65f2e78f 100644
--- a/packages/oui-navbar/src/link/navbar-link.component.js
+++ b/packages/oui-navbar/src/link/navbar-link.component.js
@@ -8,7 +8,7 @@ export default {
     bindings: {
         name: "@",
         text: "@",
-        href: "@",
+        href: "@?",
         state: "@?",
         stateParams: "<?",
         label: "@?ariaLabel",
diff --git a/packages/oui-navbar/src/menu/navbar-menu.controller.js b/packages/oui-navbar/src/menu/navbar-menu.controller.js
index a2bb9e1d..1d6b8773 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.controller.js
+++ b/packages/oui-navbar/src/menu/navbar-menu.controller.js
@@ -44,6 +44,7 @@ export default class {
     }
 
     $onInit () {
+        addBooleanParameter(this, "backButton");
         addBooleanParameter(this, "fixed");
     }
 
diff --git a/packages/oui-navbar/src/menu/navbar-menu.html b/packages/oui-navbar/src/menu/navbar-menu.html
index e3b4f82d..5642d6e7 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.html
+++ b/packages/oui-navbar/src/menu/navbar-menu.html
@@ -89,13 +89,13 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         <!-- Menu for Next Level -->
         <oui-navbar-menu class="oui-navbar_mobile-only"
             ng-if="::!!menuLink.subLinks && !!menuLink.subLinks.length"
-            back-button="true"
             header-breadcrumb="{{::menuLink.headerBreadcrumb || $ctrl.getChildBreadcrumb()}}"
             header-title="{{::menuLink.headerTitle || menuLink.title}}"
             name="{{::menuLink.name}}"
             links="::menuLink.subLinks"
             align="{{::$ctrl.align}}"
-            fixed="::$ctrl.fixed">
+            fixed="::$ctrl.fixed"
+            back-button>
         </oui-navbar-menu>
         <!-- Menu for Next Level -->
 
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index a0a187b2..66255eda 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -65,7 +65,7 @@
             header-title="{{::asideLink.headerTitle || asideLink.title}}"
             footer-template="::asideLink.footerTemplate"
             footer-title="{{::asideLink.footerTitle}}"
-            footer-url="{{::asideLink.footerUrl}}">
+            footer-href="{{::asideLink.footerUrl}}">
         </oui-navbar-notification>
         <!-- /Notifications Menu -->
 
diff --git a/packages/oui-navbar/src/notification/navbar-notification.component.js b/packages/oui-navbar/src/notification/navbar-notification.component.js
index 2cc8d70b..c43d1a6a 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.component.js
+++ b/packages/oui-navbar/src/notification/navbar-notification.component.js
@@ -6,14 +6,14 @@ export default {
         navbarCtrl: "^^ouiNavbar"
     },
     bindings: {
-        menuLinks: "<links",
         menuName: "@name",
+        menuLinks: "<links",
         limitTo: "<?",
         headerTemplate: "<?",
-        headerTitle: "@",
+        headerTitle: "@?",
         footerTemplate: "<?",
-        footerTitle: "@",
-        footerUrl: "@",
+        footerTitle: "@?",
+        footerHref: "@?",
         align: "@?",
         fixed: "<?"
     },
diff --git a/packages/oui-navbar/src/notification/navbar-notification.controller.js b/packages/oui-navbar/src/notification/navbar-notification.controller.js
index 1edec8e6..c9d6f4ed 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.controller.js
+++ b/packages/oui-navbar/src/notification/navbar-notification.controller.js
@@ -1,4 +1,6 @@
-import { addBooleanParameter } from "@oui-angular/common/component-utils";
+import { addBooleanParameter, addDefaultParameter } from "@oui-angular/common/component-utils";
+
+const defaultLimitTo = 10;
 export default class {
     constructor ($attrs, $element, $timeout, ouiNavbarConfiguration) {
         "ngInject";
@@ -15,6 +17,7 @@ export default class {
     }
 
     $onInit () {
+        addDefaultParameter(this, "limitTo", defaultLimitTo);
         addBooleanParameter(this, "fixed");
     }
 
diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html
index f2dfb2ed..d777a08f 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.html
+++ b/packages/oui-navbar/src/notification/navbar-notification.html
@@ -1,5 +1,5 @@
 <header class="oui-navbar-menu__header oui-navbar_mobile-only"
-    ng-if="::!$ctrl.headerTemplate">
+    ng-if="::!!$ctrl.headerTitle">
     <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 </header>
 <header class="oui-navbar-menu__header"
@@ -12,12 +12,12 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
         ng-class="!!menuLink.isActive ? 'oui-navbar-menu__item_active' : null">
         <i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
             ng-class=":: {
-                        'oui-icon_bicolor': menuLink.level !== 'incident',
-                        'oui-icon-error_circle': menuLink.level === 'error',
-                        'oui-icon-success_circle': menuLink.level === 'success',
-                        'oui-icon-info_circle': menuLink.level === 'info',
-                        'oui-icon-warning_circle': menuLink.level === 'warning',
-                        'oui-icon-clock-wait': menuLink.level === 'incident'
+                'oui-icon_bicolor': menuLink.level !== 'incident',
+                'oui-icon-error_circle': menuLink.level === 'error',
+                'oui-icon-success_circle': menuLink.level === 'success',
+                'oui-icon-info_circle': menuLink.level === 'info',
+                'oui-icon-warning_circle': menuLink.level === 'warning',
+                'oui-icon-clock-wait': menuLink.level === 'incident'
             }"
             aria-hidden="true">
         </i>
@@ -104,10 +104,10 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
     </li>
 </ul>
 <footer class="oui-navbar-menu__footer"
-    ng-if="::!$ctrl.footerTemplate && !!$ctrl.footerTitle && $ctrl.notificationsCreated">
+    ng-if="::!!$ctrl.footerTitle && !!$ctrl.footerHref && $ctrl.notificationsCreated">
     <a class="oui-button oui-button_secondary"
         ng-click="$ctrl.navbarCtrl.toggleMenu()"
-        ng-href="{{::$ctrl.footerUrl}}"
+        ng-href="{{::$ctrl.footerHref}}"
         ng-bind="::$ctrl.footerTitle"
         oui-navbar-group="{{::$ctrl.menuName}}"
         oui-navbar-group-last>

From cfa30fa341d7a83031a09b89c0abbf56f1b1d798 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Mon, 23 Jul 2018 13:20:22 +0200
Subject: [PATCH 08/10] chore: code review

---
 packages/oui-navbar/src/navbar.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 66255eda..82db667d 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -10,9 +10,9 @@
 <!-- Brand -->
 <div ng-transclude="brandSlot">
     <oui-navbar-brand
-        ng-if="::!!$ctrl.$attrs['brand']"
-        href="{{::$ctrl.brand.url}}"
-        heading="{{::$ctrl.brand.title}}"
+        ng-if="::!!$ctrl.$attrs['brand'] && $ctrl.brand"
+        href="{{::$ctrl.brand.href || $ctrl.brand.url}}"
+        heading="{{::$ctrl.brand.heading || $ctrl.brand.title}}"
         aria-label="{{::$ctrl.brand.label}}"
         icon-alt="{{::$ctrl.brand.iconAlt}}"
         icon-class="{{::$ctrl.brand.iconClass}}"
@@ -25,10 +25,10 @@
 <div class="oui-navbar-list oui-navbar-list_main oui-navbar_desktop-only"
     ng-transclude="mainSlot">
     <oui-navbar-link
-        ng-if="::!!$ctrl.$attrs['mainLinks']"
+        ng-if="::!!$ctrl.$attrs['mainLinks'] && $ctrl.mainLinks"
         name="{{::managerLink.name}}"
         text="{{::managerLink.title}}"
-        href="{{::managerLink.url}}"
+        href="{{::managerLink.href || managerLink.url}}"
         variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
         aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
         ng-repeat="managerLink in ::$ctrl.mainLinks track by $index"
@@ -43,7 +43,7 @@
 
     <!-- Internal -->
     <oui-navbar-dropdown
-        ng-if="::!!$ctrl.$attrs['asideLinks']"
+        ng-if="::!!$ctrl.$attrs['asideLinks'] && $ctrl.asideLinks"
         name="{{::asideLink.name}}"
         text="{{::asideLink.title}}"
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"

From 62562a56ad277a3fe75b29f1fdefc917c2021af6 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 24 Jul 2018 10:58:07 +0200
Subject: [PATCH 09/10] chore: code review

---
 packages/oui-navbar/src/navbar.controller.js         |  3 ++-
 .../src/notification/navbar-notification.html        | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/oui-navbar/src/navbar.controller.js b/packages/oui-navbar/src/navbar.controller.js
index 5d73efeb..ef0c3658 100644
--- a/packages/oui-navbar/src/navbar.controller.js
+++ b/packages/oui-navbar/src/navbar.controller.js
@@ -1,4 +1,5 @@
 import { addBooleanParameter } from "@oui-angular/common/component-utils";
+import get from "lodash/get";
 
 export default class {
     constructor ($attrs, $document, $element, $timeout, ouiNavbarConfiguration, KEYBOARD_KEYS) {
@@ -33,7 +34,7 @@ export default class {
         // Add a delay to force focus
         const delay = 50;
         this.$timeout(() => {
-            if (this.keyboardNav && this.keyboardNav[groupName] && this.keyboardNav[groupName][index]) {
+            if (get(this.keyboardNav, `${groupName}[${index}]`)) {
                 this.keyboardNav[groupName][index].focus();
             }
         }, delay);
diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html
index d777a08f..09925d08 100644
--- a/packages/oui-navbar/src/notification/navbar-notification.html
+++ b/packages/oui-navbar/src/notification/navbar-notification.html
@@ -1,6 +1,6 @@
 <header class="oui-navbar-menu__header oui-navbar_mobile-only"
     ng-if="::!!$ctrl.headerTitle">
-    <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
+    <p class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></p>
 </header>
 <header class="oui-navbar-menu__header"
     ng-if="::!!$ctrl.headerTemplate"
@@ -8,7 +8,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 </header>
 <ul class="oui-navbar-menu__body oui-navbar-list">
     <li class="oui-navbar-menu__item oui-navbar-notification"
-        ng-repeat="menuLink in ::$ctrl.menuLinks | limitTo: $ctrl.limitTo"
+        ng-repeat="menuLink in ::$ctrl.menuLinks track by $index | limitTo: $ctrl.limitTo"
         ng-class="!!menuLink.isActive ? 'oui-navbar-menu__item_active' : null">
         <i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
             ng-class=":: {
@@ -81,9 +81,9 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             </i>
             <div>
                 <div class="oui-navbar-notification-placeholder__title"
-                    ng-bind="$ctrl.translations.notification.noNotification"></div>
+                    ng-bind="::$ctrl.translations.notification.noNotification"></div>
                 <div class="oui-navbar-notification-placeholder__description"
-                    ng-bind="$ctrl.translations.notification.noNotificationDescription"></div>
+                    ng-bind="::$ctrl.translations.notification.noNotificationDescription"></div>
             </div>
 
         </div>
@@ -96,9 +96,9 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             </i>
             <div>
                 <div class="oui-navbar-notification-placeholder__title"
-                        ng-bind="$ctrl.translations.notification.errorInNotification"></div>
+                        ng-bind="::$ctrl.translations.notification.errorInNotification"></div>
                 <div class="oui-navbar-notification-placeholder__description"
-                        ng-bind="$ctrl.translations.notification.errorInNotificationDescription"></div>
+                        ng-bind="::$ctrl.translations.notification.errorInNotificationDescription"></div>
             </div>
         </div>
     </li>

From d37011aebcfe761255dd16166986dcddc99dde80 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 24 Jul 2018 14:03:15 +0200
Subject: [PATCH 10/10] chore: code review

---
 packages/oui-navbar/src/navbar.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 82db667d..12cd08a9 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -27,7 +27,7 @@
     <oui-navbar-link
         ng-if="::!!$ctrl.$attrs['mainLinks'] && $ctrl.mainLinks"
         name="{{::managerLink.name}}"
-        text="{{::managerLink.title}}"
+        text="{{::managerLink.heading || managerLink.title}}"
         href="{{::managerLink.href || managerLink.url}}"
         variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
         aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
@@ -45,7 +45,7 @@
     <oui-navbar-dropdown
         ng-if="::!!$ctrl.$attrs['asideLinks'] && $ctrl.asideLinks"
         name="{{::asideLink.name}}"
-        text="{{::asideLink.title}}"
+        text="{{::asideLink.heading || asideLink.title}}"
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
         icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
         icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"