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

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 -->
          </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>
         <ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close">
           <li class="dropdown-header">
             title text
          <li class="dropdown-footer">
            bottom text or link
    	Another button and dropdown
    For an example see :

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
    18. margin-1
    19. margin-2
    20. margin-3
    21. margin-4
    22. 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

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

  • User menu has the following markup and is inside ul.ace-nav
    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
      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" />
  • 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>
  • See the following for more info:

2. Sidebar toggle button

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