Liferay 6.2 Navigation with responsive toggle

main.js

AUI().ready(
	'liferay-hudcrumbs', 'liferay-navigation-interaction', 'liferay-sign-in-modal',
	function(A) {
		var navigation = A.one('#navigation');

		var menu_toggle = navigation.one('#nav_toggle');


		if (navigation) {
			navigation.plug(Liferay.NavigationInteraction);
		}

		menu_toggle.on('click', function(event){
			navigation.one('.collapse.nav-collapse').toggleClass('open');
		});

		var siteBreadcrumbs = A.one('#breadcrumbs');

		if (siteBreadcrumbs) {
			siteBreadcrumbs.plug(A.Hudcrumbs);
		}

		var signIn = A.one('li.sign-in a');

		if (signIn && signIn.getData('redirect') !== 'true') {
			signIn.plug(Liferay.SignInModal);
		}
	}
);

navigation.vm

<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
	<div class="navbar-inner">
		<div class="container">

			<a class="btn btn-navbar" id="nav_toggle" data-navid="navCollapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>

			<div class="collapse nav-collapse">
				<ul aria-label="#language ("site-pages")" id="navCollapse" class="nav " role="menubar">
					#foreach ($nav_item in $nav_items)
							#set ($nav_item_attr_selected="")
							#set ($nav_item_attr_has_popup="")
							#set ($nav_item_caret="")
							#set ($nav_item_css_class="lfr-nav-item")
							#set ($nav_item_link_css_class="")

						#if ($nav_item.isSelected())
							#set ($nav_item_attr_selected="aria-selected='true'")
							#set ($nav_item_css_class="$nav_item_css_class selected active")
						#end

						#if ($nav_item.hasChildren())
							#set ($nav_item_attr_has_popup="aria-haspopup='true'")
							#set ($nav_item_caret='<span class="lfr-nav-child-toggle"><i class="icon-caret-down"></i></span>')
							#set ($nav_item_css_class="$nav_item_css_class dropdown")
							#set ($nav_item_link_css_class="dropdown-toggle")
						#end

						<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
							<a aria-labelledby="layout_$nav_item.getLayoutId()" $nav_item_attr_has_popup class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item.getTarget() role="menuitem">
								<span>$nav_item.icon() $nav_item.getName() $nav_item_caret</span>
							</a>

							#if ($nav_item.hasChildren())
								<ul class="dropdown-menu child-menu" role="menu">
									#foreach ($nav_child in $nav_item.getChildren())
										#set ($nav_child_attr_selected="")
										#set ($nav_child_css_class="lfr-nav-item")

										#if ($nav_child.isSelected())
											#set ($nav_child_attr_selected="aria-selected='true'")
											#set ($nav_child_css_class="selected")
										#end

										<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
											<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.getTarget() role="menuitem">$nav_child.getName()</a>
										</li>
									#end
								</ul>
							#end
						</li>
					#end
				</ul>
			</div>
		</div>
	</div>
</nav>

<script>
	Liferay.Data.NAV_LIST_SELECTOR = '.navbar-inner .nav-collapse > ul';
</script>