navbar.html

<section>
	<h1 class="blue" data-id="#basics/navbar"><i class="ace-icon fa fa-desktop grey"></i> Navbar</h1>

	<div class="hr hr-double hr32"></div>
	<!-- #section:basics/navbar -->
	<h2 class="blue lighter help-title" data-id="#basics/navbar.layout">
		Navbar Basics
	</h2>


	<!-- #section:basics/navbar.layout -->
	<div class="help-content">
		<h3 class="info-title smaller">1. Layout</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Default HTML layout used for navbar is:
				<div>
				 <span class="thumbnail inline">
					<img src="images/navbar.png" />
				 </span>
				</div>
				<ol>
					<li>
						<b>toggle buttons</b>: come before brand text container(<code>.navbar-header</code>) or inside it.
					</li>
					<li>
						<b>.navbar-header</b>: brand text container.
					</li>
					<li>
						<b>.navbar-menu</b>: optional element which contains a menu or form.
					</li>
					<li>
						<b>.navbar-buttons.navbar-header</b>: contains user info buttons and dropdowns.
					</li>
				</ol>
				
				<div class="space-4"></div>
<pre data-language="html">
&lt;div id="navbar" class="navbar navbar-default"&gt;
 &lt;div id="navbar-container" class="navbar-container"&gt;

    &lt;!-- toggle buttons are here or inside brand container --&gt;

    &lt;div class="navbar-header pull-left"&gt;
      &lt;!-- brand text here --&gt;
    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;


    &lt;div class="navbar-buttons navbar-header pull-right "&gt;
      &lt;ul class="nav ace-nav"&gt;
        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;


    &lt;nav class="navbar-menu pull-left"&gt;
      &lt;!-- optional menu & form inside navbar --&gt;
    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;

 &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
&lt;/div&gt;&lt;!-- /.navbar --&gt;
</pre>
			</li>

			<li>
				Starting with the following file you can find more details:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller" data-id="#basics/navbar.mobile">2. Responsive Navbar</h3>
		<!-- #section:basics/navbar.mobile -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				There are two styles of responsive (mobile view) navbar:
				<ol class="spaced">
					<li>
						Default style in which buttons move down when screen is small and below <b>480px</b>.
						<br />
						<span class="thumbnail inline">
							<img src="images/navbar-mobile1.png" />
						</span>
						<br />
						You can change this value by modifying <code>@screen-topbar-down</code> variable
						at <code>assets/css/less/variables.less</code> and re-compile <code>ace.less</code>.
					</li>
					<li>
						Bootstrap collapse style in which user buttons & dropdowns are hidden and 
						when screen is below <b>992px</b>, toggle buttons are used to hide/show them.
						<br />
						
						<span class="thumbnail inline">
							<img src="images/navbar-mobile2.png" />
						</span>
						
						<br />
						<i class="fa fa-hand-o-right"></i> 
						You can change <b>992px</b> to something else,
						please see the note at <a href="#files/css.bootstrap" class="help-more">CSS section</a>
						
						<div class="space-6"></div>
						To enable this mobile style:
						<ul>
							<li>
								Add necessary <a href="#basics/navbar.toggle" class="help-more">toggle buttons</a>
							</li>
							<li>
								Add <code>.navbar-collapse</code> class to <code>.navbar</code> element
							</li>
							<li>
								Add <code>.navbar-collapse</code> and <code>.collapse</code>
								class to <code>.navbar-buttons</code> element
							</li>
							
							<li>
								If there are is a navbar menu or form, you should add <code>.navbar-collapse</code> and <code>.collapse</code>
								class to <code>.navbar-menu</code> element
							</li>
						</ul>


<pre data-language="html">
&lt;div id="navbar" class="navbar navbar-default navbar-collapse"&gt;
 &lt;div id="navbar-container" class="navbar-container"&gt;

    &lt;div class="navbar-header pull-left"&gt;
      &lt;!-- brand text here --&gt;
    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;


    &lt;div class="navbar-buttons navbar-header pull-right
	                navbar-collapse collapse"&gt;
      &lt;ul class="nav ace-nav"&gt;
        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;


    &lt;nav class="navbar-menu pull-left
	               navbar-collapse collapse"&gt;
      &lt;!-- optional menu & form inside navbar --&gt;
    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;

 &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
&lt;/div&gt;&lt;!-- /.navbar --&gt;
</pre>
		
					</li>
				</ol>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.mobile -->
		

		<h3 class="info-title smaller">3. Navbar options</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<ol class="spaced">
					<li>
						For fixed navbar you should add <code>.navbar-fixed-top</code> class to <code>.navbar</code> element.
						<br />
						See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
					</li>
					<li>
						For navbar inside <b>.container</b> you should add <code>.container</code> class to <code>.navbar-container</code> element.
						<br />
						See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
					</li>
					<li>
						When sidebar is horizontal you should add <code>.h-navbar</code> class to <code>.navbar</code> element.
						<br />
						See <a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a> for more info.
					</li>
				</ol>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		
		<h3 class="info-title smaller" data-id="#basics/navbar.layout.brand">4. Brand</h3>
		<!-- #section:basics/navbar.layout.brand -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
			Brand text is inside <code>.navbar-header</code> container and has the following markup:
<pre data-language="html">
 <div class="navbar-header pull-left">
   <a href="#" class="navbar-brand">
    <small>
      <i class="ace-icon fa fa-leaf"></i>
      Brand Text
    </small>
   </a>
 </div>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.layout.brand -->
		
	</div><!-- /.help-content -->
	<!-- /section:basics/navbar.layout -->





	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/navbar.dropdown">
		User Buttons/Dropdowns
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/navbar.dropdown -->
	<div class="help-content">
		<h3 class="info-title smaller">1. Overview</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
			User buttons & dropdowns are inside <code>.navbar-buttons</code> element, inside a <code>ul.ace-nav</code> list:
			<div class="space-4"></div>
<pre data-language="html">
 &lt;div class="navbar-buttons navbar-header pull-right"&gt;
  &lt;ul class="nav ace-nav"&gt;

    &lt;li class="light-blue"&gt;

     &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;
       &lt;i class="ace-icon fa fa-tasks"&gt;&lt;/i&gt;
       &lt;span class="badge"&gt;5&lt;/span&gt;
     &lt;/a&gt;

     &lt;ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close"&gt;
       &lt;li class="dropdown-header"&gt;
         title text
       &lt;/li&gt;

       &lt;li&gt;
         item#1.
       &lt;/li&gt;
       &lt;li&gt;
         item#2.
       &lt;/li&gt;

      &lt;li class="dropdown-footer"&gt;
        bottom text or link
      &lt;/li&gt;
    &lt;/ul&gt;

   &lt;/li&gt;
   

   &lt;li&gt;
	Another button and dropdown
   &lt;/li&gt;
   
  &lt;/ul&gt;
 &lt;/div&gt;
</pre>

			


			For an example see :
			<br />
			<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>tasks.mustache</code>
			
			<br />
			<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>notifications.mustache</code>
		
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">2. Button & Menu colors</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li class="spaced2">
				There are some colors and options for user dropdown buttons:
				<br />
				<ol>
					<li>Default dark blue color</li>
					<li><code>grey</code></li>
					<li><code>purple</code></li>
					<li><code>green</code></li>
					<li><code>light-blue</code></li>
					<li><code>light-blue2</code></li>
					<li><code>red</code></li>
					<li><code>light-green</code></li>
					<li><code>light-purple</code></li>
					<li><code>light-orange</code></li>
					<li><code>light-pink</code></li>
					<li><code>dark</code></li>
					<li><code>white-opaque</code></li>
					<li><code>dark-opaque</code></li>
					<li><code>transparent</code></li>
					<li><code>light-10</code></li>
					<li><code>dark-10</code></li>
					
					<li class="space-6"></li>

					<li><code>margin-1</code></li>
					<li><code>margin-2</code></li>
					<li><code>margin-3</code></li>
					<li><code>margin-4</code></li>
					
					<li class="space-6"></li>

					<li><code>no-border</code></li>
				</ol>
				
<pre data-language="html">
 <li class="light-pink no-border margin-1">
  <!-- dropdown content goes here -->
 </li>
</pre>

			<div class="alert alert-info">
			 <i class="fa fa-hand-o-right bigger-125"></i>
			 When you change a skin using settings box options,
			 some of the navbar user buttons inside <code>.ace-nav &gt; li</code> may get a different color.
			 <div class="space-4"></div>
			 The color is dynamically changed by switching to one of the above mentioned
			 color classes using Javascript and is not dependent on that specific skin.
			 <br />
			 You may want to hard code any button color of choice in your HTML without using Javascript.
			</div>

			</li>
			
			<li>
				And there are some different colors for dropdowns:
				<br />
				<ol>
					<li>Default blue color</li>
					<li><code>navbar-pink</code></li>
					<li><code>navbar-grey</code></li>
					<li><code>navbar-green</code></li>
				</ol>
<pre data-language="html">
 <li class="purple">
  <a href="#">
	...
  </a>
  <ul class="dropdown-navbar navbar-pink dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
	...
  </ul>
 </li>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		

		<h3 class="info-title smaller">3. Mobile (responsive) User Menus</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Please refer to <a href="#basics/navbar.mobile" class="help-more">responsive navbar</a> for more info.
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->


		<h3 class="info-title smaller" data-id="#basics/navbar.dropdown-content">4. .dropdown-content & Scrollbars</h3>
		<!-- #section:basics/navbar.dropdown-content -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				You can put the dropdown's main content inside <code>.dropdown-content</code> element.
				<br />
				This way you can have scrollbars on content:
				<div>
				 <span class="thumbnail inline">
					<img src="images/scroll-content.png" />
				 </span>
				</div>
				
				<pre data-language="html">
 <li class="purple">
  <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
    <li class="dropdown-header"></li>
	
    <li class="dropdown-content">
      <ul class="dropdown-menu dropdown-navbar">
         <!-- content and list of items are here -->
      </ul>
    </li>
	
    <li class="dropdown-footer"></li>
  </ul>
</pre>
			</li>
			
			<li>
				Inside <code>assets/js/ace/ace.js</code> is the code to automatically apply scrollbars on <code>.dropdown-content</code> element.
				<br />
				Default content height is <b>200px</b>. You can change this using <code>data-size</code> attribute:
<pre data-language="html">
  <li class="dropdown-content" data-size="250">

  </li>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.dropdown-content -->
		
		
		
		<h3 class="info-title smaller" data-id="#basics/navbar.tabbed">5. Tabbed dropdown</h3>
		<!-- #section:basics/navbar.tabbed -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				You can use a <a href="#elements.tab" class="help-more">tab element</a> inside dropdown.
				<br />
				As an example you can see <b>top menu</b> page:
				<div>
				  <span class="thumbnail inline no-margin-bottom">
					<img src="images/tabbed-dropdown.png" />
				  </span>
				</div>
				<br />
				Inside each <code>.tab-pane</code> you should use a <code>.dropdown-menu</code>:

<pre data-language="html">
<ul class="nav ace-nav">
 <li class="light-blue">
  <a data-toggle="dropdown" class="dropdown-toggle" href="#">
    <i class="ace-icon fa fa-bell icon-animated-bell"></i>
  </a>

  <!-- it should be a "DIV.dropdown-menu" here not a "UL.dropdown-menu" -->
  <div class="dropdown-navbar dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
   <div class="tabbable">

   <!-- tab buttons here -->
    <ul class="nav nav-tabs">
     <li class="active">
       <a data-toggle="tab" href="#navbar-tasks">
         Tasks
         <span class="badge badge-danger">4</span>
       </a>
     </li>
     <li>
       <a data-toggle="tab" href="#navbar-messages">
         Messages
         <span class="badge badge-danger">5</span>
       </a>
     </li>
    </ul><!-- .nav-tabs -->


    <!-- tab content here -->
    <div class="tab-content">

     <div id="navbar-tasks" class="tab-pane in active">
      <!-- first tab pane and the .dropdown-menu inside it -->
      <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
         <li>
           item # 1
         </li>
         <li>
           item # 2
         </li>

         <li class="dropdown-footer">
            ...
         </li>
      </ul>
     </div><!-- /.tab-pane -->
  

     <div id="navbar-messages" class="tab-pane">
      <!-- second tab pane and the .dropdown-menu inside it -->
      <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
        <!-- .dropdown-content -->
        <li class="dropdown-content">
         <ul class="dropdown-menu dropdown-navbar">
          <li>
             item # 1
          </li>
          <li>
             item # 2
          </li>
         </ul>
        </li><!-- /.dropdown-content -->

        <li class="dropdown-footer">
          ...
        </li>
       </ul>
      </div><!-- /.tab-pane -->

     </div><!-- /.tab-content -->

   </div><!-- /.tabbable -->

  </div><!-- /DIV.dropdown-menu -->
 </li>
</ul><!-- /.ace-nav -->
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.tabbed -->
		

	</div><!-- /.help-content -->
	<!-- /section:basics/navbar.dropdown -->

	
	
	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/navbar.user">
		User Menu
	</h2>
	<div class="space-4"></div>

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#basics/navbar.user_menu">User menu</h3>
		<!-- #section:basics/navbar.user_menu -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<div>
					<span class="thumbnail inline">
						<img src="images/user-menu.png" />
					</span>
				</div>
				User menu has the following markup and is inside <code>ul.ace-nav</code>
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/default/navbar/</span>user_menu.mustache</code>
				<br />
<pre data-language="html">
<ul class="ace ace-nav">
 ...
 <li class="light-blue">
  <a data-toggle="dropdown" href="#" class="dropdown-toggle">
    <img class="nav-user-photo" src="path/to/avatar.jpg" alt="Jason's Photo" />
    <span class="user-info">
      <small>Welcome,</small> Jason
    </span>
    <i class="ace-icon fa fa-caret-down"></i>
  </a>
  <ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close">
    <li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="ace-icon fa fa-power-off"></i> Logout</a></li>
  </ul>
 </li>

</ul>
</pre>

			You can also add <code>.user-min</code> class to it, so it becomes more compact:
<pre data-language="html">
  <li class="light-blue user-min">
   ...
  </li>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
	</div>
	<!-- /section:basics/navbar.user_menu -->

	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
		Toggle buttons
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/navbar.toggle -->
	<div class="help-content">
		<h3 class="info-title smaller">1. Navbar toggle button</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Toggle buttons are used when navbar or sidebar have collapsible mobile style.
				<br />
				You should put the code either inside <b>.navbar-header</b> which contains brand text or before it:
<pre data-language="html">
 <!-- collapse style toggle buttons can be here -->
 <div class="navbar-header pull-left">
   <a class="navbar-brand" href="#">
      <!-- brand text is here -->
   </a>
   <!-- collapse style toggle buttons can be here -->
 </div>
</pre>
			</li>
			
			<li>
			The following is a button which toggles <code>.navbar-buttons,.navbar-menu</code>.
			<br />
			Using <code>data-toggle</code> and <code>data-target</code> attributes,
			you can choose to toggle any element, for example toggle only <code>.navbar-buttons</code> or
			both <code>.navbar-buttons,.navbar-menu</code>
<pre data-language="html">
 &lt;button
  class="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu"&gt;
   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
   &lt;img src="path/to/avatar/user.jpg" alt="Jason's Photo" /&gt;
 &lt;/button&gt;
</pre>
			</li>
			
			<li>
				Inside the button you can also use an icon instead of an avatar :
				<br />
<pre data-language="html">
 &lt;button class="pull-right navbar-toggle collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons"&gt;
   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
   &lt;i class="ace-icon fa fa-user fa-2x white"&gt;&lt;/i&gt;
 &lt;/button&gt;
</pre>
			</li>	

			<li>
				See the following for more info:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>toggle_buttons.mustache</code>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->

		
		
		
		<h3 class="info-title smaller" data-id="#basics/navbar.toggle.sidebar">2. Sidebar toggle button</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Please see <a href="#basics/sidebar.mobile.toggle" class="help-more">Sidebar toggle</a> for more info
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
	</div><!-- /.help-content -->
	<!-- /section:basics/navbar.toggle -->
	
	
	
	
	
	
	
	
	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
		Navbar Menu & Form
	</h2>
	<div class="space-4"></div>

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#basics/navbar.nav">1. Navbar Menu</h3>
		<!-- #section:basics/navbar.nav -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				You can have a menu inside navbar like <b>top menu</b> sample page.
			</li>

			<li>
				For an overview of the HTML markup needed for that you can see:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>topmenu.mustache</code>
			</li>
			
			<li>
				Inside <code>.navbar-menu</code> container, you should have <code>ul.nav.navbar-nav</code> element:
			</li>

			<li>
<pre data-language="html">
 <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
  <ul class="nav navbar-nav">

    <li>
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        item # 1
      </a>
      <ul class="dropdown-menu dropdown-light-blue dropdown-caret">
        <!-- optional submenu items -->
      </ul>
    </li>

    <li>
      <a href="#">
        item # 2
      </a>
    </li>

  </ul>

  <!-- you can also have a form here -->
 </nav>
</pre>
			</li>
			
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.nav -->


		<h3 class="info-title smaller" data-id="#basics/navbar.form">2. Navbar Form</h3>
		<!-- #section:basics/navbar.form -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Navbar form is similar to navbar menu.
				<br />
				Inside <code>.navbar-menu</code> container, the form should have <code>.navbar-form</code> class:
				<br />
<pre data-language="html">
 <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
  <!-- you can also have a menu here -->
  <form class="navbar-form navbar-left form-search" role="search">
     <div class="form-group">
       <input type="text" placeholder="search" />
	 </div><button type="button" class="btn btn-xs btn-info2">
       <i class="ace-icon fa fa-search icon-only bigger-110"></i>
     </button>
  </form>
 </nav>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/navbar.form -->
		
	</div><!-- /.help-content -->
	
	<!-- /section:basics/navbar -->
	
</section>