1. Layout

Default HTML layout used for navbar is:

toggle buttons: come before brand text container(.navbar-header) or inside it.
.navbar-header: brand text container.
.navbar-menu: optional element which contains a menu or form.
.navbar-buttons.navbar-header: contains user info buttons and dropdowns.

<div id="navbar" class="navbar navbar-default">
 <div id="navbar-container" class="navbar-container">

    <!-- toggle buttons are here or inside brand container -->

    <div class="navbar-header pull-left">
      <!-- brand text here -->
    </div><!-- /.navbar-header -->


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


    <nav class="navbar-menu pull-left">
      <!-- optional menu & form inside navbar -->
    </nav><!-- /.navbar-menu -->

 </div><!-- /.navbar-container -->
</div><!-- /.navbar -->

Starting with the following file you can find more details:
mustache/app/views/layouts/partials/_shared/navbar.mustache

2. Responsive Navbar

There are two styles of responsive (mobile view) navbar:
1. Default style in which buttons move down when screen is small and below 480px.
  
  You can change this value by modifying @screen-topbar-down variable at assets/css/less/variables.less and re-compile ace.less.
2. Bootstrap collapse style in which user buttons & dropdowns are hidden and when screen is below 992px, toggle buttons are used to hide/show them.
  
  You can change 992px to something else, please see the note at CSS section
  To enable this mobile style:
  - Add necessary toggle buttons
  - Add .navbar-collapse class to .navbar element
  - Add .navbar-collapse and .collapse class to .navbar-buttons element
  - If there are is a navbar menu or form, you should add .navbar-collapse and .collapse class to .navbar-menu element
```
<div id="navbar" class="navbar navbar-default navbar-collapse">
 <div id="navbar-container" class="navbar-container">

    <div class="navbar-header pull-left">
      
    </div>


    <div class="navbar-buttons navbar-header pull-right
	                navbar-collapse collapse">
      <ul class="nav ace-nav">
        
      </ul>
    </div>


    <nav class="navbar-menu pull-left
	               navbar-collapse collapse">
      
    </nav>

 </div>
</div>
```

3. Navbar options

1. For fixed navbar you should add .navbar-fixed-top class to .navbar element.
  See Page Settings for more info.
2. For navbar inside .container you should add .container class to .navbar-container element.
  See Page Settings for more info.
3. When sidebar is horizontal you should add .h-navbar class to .navbar element.
  See Horizontal Menu for more info.

4. Brand

Brand text is inside .navbar-header container and has the following markup:

 
   
    
      
      Brand Text

1. Overview

User buttons & dropdowns are inside .navbar-buttons element, inside a ul.ace-nav list:

 <div class="navbar-buttons navbar-header pull-right">
  <ul class="nav ace-nav">

    <li class="light-blue">

     <a data-toggle="dropdown" class="dropdown-toggle" href="#">
       <i class="ace-icon fa fa-tasks"></i>
       <span class="badge">5</span>
     </a>

     <ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close">
       <li class="dropdown-header">
         title text
       </li>

       <li>
         item#1.
       </li>
       <li>
         item#2.
       </li>

      <li class="dropdown-footer">
        bottom text or link
      </li>
    </ul>

   </li>
   

   <li>
	Another button and dropdown
   </li>
   
  </ul>
 </div>

For an example see :
mustache/app/views/layouts/partials/_shared/navbar/tasks.mustache
mustache/app/views/layouts/partials/_shared/navbar/notifications.mustache

2. Button & Menu colors

There are some colors and options for user dropdown buttons:
1. Default dark blue color
2. grey
3. purple
4. green
5. light-blue
6. light-blue2
7. red
8. light-green
9. light-purple
10. light-orange
11. light-pink
12. dark
13. white-opaque
14. dark-opaque
15. transparent
16. light-10
17. dark-10
19. margin-1
20. margin-2
21. margin-3
22. margin-4
24. no-border
```
 
  
 
```
When you change a skin using settings box options, some of the navbar user buttons inside .ace-nav > li may get a different color.
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.
You may want to hard code any button color of choice in your HTML without using Javascript.
And there are some different colors for dropdowns:
1. Default blue color
2. navbar-pink
3. navbar-grey
4. navbar-green
```
 
  
	...
  
  
	...
  
 
```

3. Mobile (responsive) User Menus

Please refer to responsive navbar for more info.

4. .dropdown-content & Scrollbars

You can put the dropdown's main content inside .dropdown-content element.
This way you can have scrollbars on content:
```
 
  
    
	
    
      
         
      
    
	
    
  
```
Inside assets/js/ace/ace.js is the code to automatically apply scrollbars on .dropdown-content element.
Default content height is 200px. You can change this using data-size attribute:
```
  

  
```

5. Tabbed dropdown

You can use a tab element inside dropdown.
As an example you can see top menu page:

Inside each .tab-pane you should use a .dropdown-menu:

User menu

User menu has the following markup and is inside ul.ace-nav
mustache/app/views/layouts/partials/default/navbar/user_menu.mustache
```
 ...
 
  
    
    
      Welcome, Jason
    
    
  
  
     Settings
    
     Logout
  
 
```
You can also add .user-min class to it, so it becomes more compact:
```
  
   ...
  
```

1. Navbar toggle button

Toggle buttons are used when navbar or sidebar have collapsible mobile style.
You should put the code either inside .navbar-header which contains brand text or before it:
```
 
 
   
      
   
   
 
```

The following is a button which toggles .navbar-buttons,.navbar-menu.
Using data-toggle and data-target attributes, you can choose to toggle any element, for example toggle only .navbar-buttons or both .navbar-buttons,.navbar-menu

 <button
  class="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu">
   <span class="sr-only">Toggle user menu</span>
   <img src="path/to/avatar/user.jpg" alt="Jason's Photo" />
 </button>

Inside the button you can also use an icon instead of an avatar :

 <button class="pull-right navbar-toggle collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons">
   <span class="sr-only">Toggle user menu</span>
   <i class="ace-icon fa fa-user fa-2x white"></i>
 </button>

See the following for more info:
mustache/app/views/layouts/partials/_shared/navbar/toggle_buttons.mustache

2. Sidebar toggle button

Please see Sidebar toggle for more info

1. Navbar Menu

You can have a menu inside navbar like top menu sample page.
For an overview of the HTML markup needed for that you can see:
mustache/app/views/layouts/partials/_shared/navbar/topmenu.mustache
Inside .navbar-menu container, you should have ul.nav.navbar-nav element:

2. Navbar Form

Navbar form is similar to navbar menu.
Inside .navbar-menu container, the form should have .navbar-form class:
```
 
  
  
     
       
	 

  
 
```

Navbar

Navbar Basics