<div>

<nav class="navbar navbar-pf-vertical">

<div class="navbar-header">

<button type="button" class="navbar-toggle" ng-click="$ctrl.handleNavBarToggleClick()">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<span class="navbar-brand">

<img class="navbar-brand-icon" ng-if="$ctrl.brandSrc" ng-src="{{$ctrl.brandSrc}}" alt="{{$ctrl.brandAlt}}"/>

<span class="navbar-brand-txt" ng-if="!$ctrl.brandSrc">{{$ctrl.brandAlt}}</span>

</span>

</div>

<nav class="collapse navbar-collapse" ng-transclude></nav>

<div class="nav-pf-vertical"

ng-class="{'nav-pf-persistent-secondary': $ctrl.persistentSecondary,

'nav-pf-vertical-collapsible-menus': $ctrl.pinnableMenus,

'hidden-icons-pf': $ctrl.hiddenIcons,

'nav-pf-vertical-with-badges': $ctrl.showBadges,

'secondary-visible-pf': $ctrl.activeSecondary,

'show-mobile-secondary': $ctrl.showMobileSecondary,

'show-mobile-tertiary': $ctrl.showMobileTertiary,

'hover-secondary-nav-pf': $ctrl.hoverSecondaryNav,

'hover-tertiary-nav-pf': $ctrl.hoverTertiaryNav,

'collapsed-secondary-nav-pf': $ctrl.collapsedSecondaryNav,

'collapsed-tertiary-nav-pf': $ctrl.collapsedTertiaryNav,

'hidden': $ctrl.inMobileState,

'collapsed': $ctrl.navCollapsed,

'force-hide-secondary-nav-pf': $ctrl.forceHidden,

'show-mobile-nav': $ctrl.showMobileNav}">

<ul class="list-group">

<li ng-repeat="item in $ctrl.items" class="list-group-item"

ng-class="{'secondary-nav-item-pf': item.children && item.children.length > 0,

'active': item.isActive,

'is-hover': item.isHover,

'mobile-nav-item-pf': item.isMobileItem && $ctrl.showMobileSecondary,

'mobile-secondary-item-pf': item.isMobileItem && $ctrl.showMobileTertiary}"

ng-mouseenter="$ctrl.handlePrimaryHover(item)" ng-mouseleave="$ctrl.handlePrimaryUnHover(item)">

<a ng-click="$ctrl.handlePrimaryClick(item, $event)">

<span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: $ctrl.hiddenIcons}"

uib-tooltip="{{item.title}}"

tooltip-append-to-body="true"

tooltip-enable="{{$ctrl.navCollapsed}}"

tooltip-placement="bottom"

tooltip-class="nav-pf-vertical-tooltip">

</span>

<span class="list-group-item-value">{{item.title}}</span>

<div ng-if="$ctrl.showBadges && item.badges" class="badge-container-pf">

<div class="badge {{badge.badgeClass}}" ng-repeat="badge in item.badges"

uib-tooltip="{{badge.tooltip}}"

tooltip-append-to-body="true"

tooltip-placement="right">

<span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>

<span ng-if="badge.count">{{badge.count}}</span>

</div>

</div>

</a>

<div ng-if="item.children && item.children.length > 0" class="nav-pf-secondary-nav">

<div class="nav-item-pf-header">

<a class="secondary-collapse-toggle-pf" ng-click="$ctrl.collapseSecondaryNav(item, $event)" ng-class="{'collapsed': item.secondaryCollapsed}"></a>

<span>{{item.title}}</span>

</div>

<ul class="list-group">

<li ng-repeat="secondaryItem in item.children" class="list-group-item"

ng-class="{'tertiary-nav-item-pf': secondaryItem.children && secondaryItem.children.length > 0,

'active': secondaryItem.isActive,

'is-hover': secondaryItem.isHover,

'mobile-nav-item-pf': secondaryItem.isMobileItem}"

ng-mouseenter="$ctrl.handleSecondaryHover(secondaryItem)" ng-mouseleave="$ctrl.handleSecondaryUnHover(secondaryItem)">

<a ng-click="$ctrl.handleSecondaryClick(item, secondaryItem, $event)">

<span class="list-group-item-value">{{secondaryItem.title}}</span>

<div ng-if="showBadges && secondaryItem.badges" class="badge-container-pf">

<div class="badge {{badge.badgeClass}}" ng-repeat="badge in secondaryItem.badges"

uib-tooltip="{{badge.tooltip}}"

tooltip-append-to-body="true"

tooltip-placement="right">

<span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>

<span ng-if="badge.count">{{badge.count}}</span>

</div>

</div>

</a>

<div ng-if="secondaryItem.children && secondaryItem.children.length > 0" class="nav-pf-tertiary-nav">

<div class="nav-item-pf-header">

<a class="tertiary-collapse-toggle-pf" ng-click="$ctrl.collapseTertiaryNav(secondaryItem, $event)" ng-class="{'collapsed': secondaryItem.tertiaryCollapsed}"></a>

<span>{{secondaryItem.title}}</span>

</div>

<ul class="list-group">

<li ng-repeat="tertiaryItem in secondaryItem.children" class="list-group-item" ng-class="{'active': tertiaryItem.isActive}">

<a ng-click="$ctrl.handleTertiaryClick(item, secondaryItem, tertiaryItem, $event)">

<span class="list-group-item-value">{{tertiaryItem.title}}</span>

<div ng-if="$ctrl.showBadges && tertiaryItem.badges" class="badge-container-pf">

<div class="badge {{badge.badgeClass}}" ng-repeat="badge in tertiaryItem.badges"

uib-tooltip="{{badge.tooltip}}"

tooltip-append-to-body="true"

tooltip-placement="right">

<span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>

<span ng-if="badge.count">{{badge.count}}</span>

</div>

</div>

</a>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</nav>

</div>