# Navbar

## Navbar Basics

### 1. Layout

- Default HTML layout used for navbar is:
  1. toggle buttons: come before brand text container(`.navbar-header`) or inside it.
  2. .navbar-header: brand text container.
  3. .navbar-menu: optional element which contains a menu or form.
  4. .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">
               <!-- brand text here -->
             </div><!-- /.navbar-header -->

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

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

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

### 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:

## User Buttons/Dropdowns

### 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`

  You can also add `.user-min` class to it, so it becomes more compact:

- ...

## Toggle buttons

### 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

## Navbar Menu & Form

### 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: