Ace Admin Docs
🔍
‹ ›

Navbar

Structure

Navbar structure in main layout can be viewed in views/layouts/dashboard/navbar.hbs and has 3 optional parts:

  • .navbar-intro. It's optional. You can use a simple div.d-flex element
  • .navbar-content. It's optional. You can use a simple div element
  • .navbar-menu and a .navbar-toggler that toggles navbar menu in mobile view

They are wrapped inside a .navbar-inner element:

html 
<div class="navbar navbar-expand-lg navbar-fixed navbar-white">
 <div class="navbar-inner">

    <div class="navbar-intro">
        <!-- may contain brand icon , sidebar toggler menu , breadcrumbs, title, etc -->
    </div>

    <div class="navbar-content">
        <!-- may contain navbar content such as searchbox, sidebar toggler button, etc -->
    </div>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <!-- Button to toggle #navbarMenu -->
    </button>

    <div class="navbar-menu collapse navbar-collapse navbar-backdrop" id="navbarMenu">
        <div class="navbar-nav">
            <ul class="nav">
              <!-- navbar buttons -->
            </ul>
        </div>
    </div>

 </div>
</div>

It's the navbar buttons such as the notifcation icon, user dropdown, etc:

html 
<ul class="nav">
  <li class="nav-item dropdown dropdown-mega">
      <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        ...
      </a>
      <div class="dropdown-menu">
        ...
      </div>
  </li>
  .
  .
  .
</ul>

The .nav element can have the following options:

  • .has-active-border shows a highlight border when item is opened and dropdown is shown
  • .nav-compact , .nav-compact-2 , .nav-compact-3 for more compact nav buttons
  • .border-0 for no border between nav buttons
html 
<ul class="nav nav-compact has-active-border">
    ...
</ul>

Navbar links

An example is in Dashboard 2 and it's similar to navbar menu, you should just add .navbar-links class to .navbar-nav and the buttons can be custom .btn elements:

html 
<div id="navbarMenu2" class="navbar-menu collapse navbar-collapse navbar-backdrop">
  <div class="navbar-nav navbar-links">
    <ul class="nav">
      <li class="nav-item mx-2">
        <a href="#" class="active btn bgc-h-primary-l4 btn-brc-tp btn-outline-secondary btn-h-lighter-secondary btn-a-outline-primary btn-a-bgc-tp btn-a-bold px-4 px-lg-2">
          Overview
        </a>
      </li>
      .
      .
      .
    </ul>
  </div>
</div>

The navbar buttons can be either .nav-link or .btn :

html 
<ul class="nav border-0 nav-compact-2">
  <li class="nav-item dropdown">
    <a class="btn btn-warning dropdown-toggle" href="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
       ...
    </a>
  </li>
</ul>

Content section

Content section can have optional content inside it and you should decide what to do with the content in mobile view.
For example in demo, the search box in mobile will be hidden and only shown when clicked on the toggler button:

html 
<div class="navbar-content">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSearch">
    Toggle Search In Mobile View
  </button>

  <div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
    Search box here
  </div>

</div>

For search input element to be styled like in demo, it should have .navbar-input class.

In small devices, if an element inside .navbar-collapse has autofocus class, then it will receive focus when .navbar-collapse is displayed

There are several ways and examples in Ace that you can add a search box in navbar.

  • In default Dashboard and Dashboard 4, search box is inside a .navbar-collapse element:
    Navbar search
html 
<div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
    <div class="d-flex align-items-center ml-lg-3">
        <i class="fa fa-search text-blue-m1 mr-n3 d-none d-lg-block pb-2px"></i>
        <input type="text" class="navbar-input py-3 py-lg-1 px-3 pl-lg-4 w-100 autofocus" placeholder="SEARCH ..." aria-label="Search" />
    </div>
</div>
  • See views/layouts/dashboard/navbar-search.hbs for more details
  • In Dashboard 2 page in desktop mode (lg+ width), search box is inside navbar menu (#navbarMenu) as a .nav-item and a custom .dropdown-menu:
    Navbar search
html 
<!-- search box for desktop view -->
<!-- it's a .dropdown-menu with custom position and width, etc -->
<li class="d-none d-lg-inline nav-item dd-backdrop dropdown dropdown-mega">
    <a class="nav-link dropdown-toggle px-35" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-search"></i>
    </a>
  
    <!-- this dropdown menu is positioned on topleft of navbar with no min-width -->
    <div class="dropdown-menu dropdown-animated position-tl w-auto mw-none h-auto overflow-hidden border-0 p-0 bgc-white">
      <div class="dropdown-clickable w-100"><!-- dropdown-clickable, so dropdown won't be hidden when you click on it -->
        <div class="pos-rel d-flex align-items-center w-50 mx-auto pl-4 pl-lg-0">
            <i class="fa fa-search text-primary-m2 mr-1"></i>

            <!-- .autofocus input -->
            <input type="text" class="form-control autofocus text-110 shadow-none mx-0 w-100 border-0 my-25 py-2" placeholder="Start searching ..." aria-label="Search" />

            <!-- the close button -->
            <a data-dismiss="dropdown" href="#" class="position-r py-0 mr-n5 btn btn-outline-lightgrey btn-h-outline-red btn-a-outline-red border-0 radius-1">
              <span class="text-180">×</span>
            </a>
        </div>
      </div>   
    </div>
</li>
  • See views/layouts/dashboard-2/navbar-search-desktop.hbs for more details
  • In Landing page search box is inside a navbar menu, as a button with a dropdown that shows the search box:
    Navbar search
html 
<li class="nav-item dropdown border-l-1 brc-secondary-l2">
    <a href="#" class="nav-link dropdown-toggle px-lg-3" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <i class="text-140 fa fa-search text-grey-m1"></i>
    </a>
    <div style="width: 20rem;" data-display="static" class="dropdown-menu dropdown-menu-right dropdown-caret dropdown-animated animated-2 shadow radius-1 p-0  border-1 brc-primary-m3 mt-lg-n1 mr-lg-n2">
        <!-- search box here -->
    </div>
</li>

You can also put search box inside sidebar similar to main Dashboard, or inside content area similar to Horizontal menu page

  • In default Dashboard page, the same search box that is used in Desktop, is collapsed (hidden) in mobile and shown using a toggler button:
html 
<div class="navbar-content">

  <button class="navbar-toggler py-2" type="button" data-toggle="collapse" data-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navbar search">
      <i class="fa fa-search text-white text-90 py-1"></i>
  </button><!-- mobile #navbarSearch toggler -->

  <div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
      <div class="d-flex align-items-center ml-lg-4 py-1">
          <i class="fa fa-search text-white d-none d-lg-block pos-rel"></i>
          <input type="text" class="navbar-input mx-3 flex-grow-1 mx-md-auto pr-1 pl-lg-4 ml-lg-n3 py-2 autofocus" placeholder="SEARCH ..." aria-label="Search" />
      </div>
  </div>
    
</div><!-- .navbar-content -->
  • In Dashboard 2, search box for mobile is a separate element, only shown in mobile view (d-lg-none):
html 
<div class="d-lg-none navbar-content flex-grow-0 ml-auto">
    <button class="navbar-toggler h-75" type="button" data-toggle="collapse" data-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navbar search">
        <i class="fa fa-search text-blue-m1 text-90"></i>
    </button>

    <div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
        <div class="d-flex align-items-center pl-4">
            <i class="fa fa-search text-blue-m1 mr-n425"></i>

            <input type="text" class="autofocus w-100 pl-3 pr-475 py-35 border-0" placeholder="Search ..." aria-label="Search" />

            <a href="#" class="btn border-0 ml-n475 radius-100 py-15 btn-text-lightgrey btn-h-light-blue px-25 pos-rel">
              <i class="fa fa-microphone"></i>
            </a>
        </div>
    </div>
</div><!-- .navbar-content -->

If you have a FORM[data-submit=dismiss] inside a .navbar-collapse, it will be hidden when the form gets submitted.

html 
<div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
  <form data-submit="dismiss">
   ...
  </form>
</div>

Themes

See Navbar Themes

Dropdowns in navbar are not different from other dropdowns, except you can have mega dropdowns by applying .dropdown-mega to the parent .nav-item and the .dropdown-menu item can be .dropdown-lg, .dropdown-md, .dropdown-sm, .dropdown-xs , .dropdown-xxs AND .dropdown-center.

Also the .nav-item can have .dd-backdrop which adds a backdrop:

html 
<li class="nav-item dropdown dropdown-mega dd-backdrop">
   <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
     ...
   </a>

   <div class="dropdown-menu dropdown-sm dropdown-center">
     ...
   </div>
</li>

You can also add .dropdown-hover to .nav-item.dropdown element and .dropdown-menu will be shown on mouse hover (in desktop only).

Mobile View

By adding .navbar-expand-lg to .navbar it will become mobile view below 992px (lg) screen size.

If you want you can change that to .navbar-expand-xl. But you should also re-build ace.css by setting $navbar-desktop-min-width to xl and $navbar-mobile-max-width to lg in _variables.scss file.

You can also change navbar height in mobile view by changing mobile-height in _navbar-themes-variables.scss .

Add .navbar-backdrop to the .navbar-collapse to show backdrop in small devices.

Navbar toggler is the button used to toggle navbar in mobile view. It can be any element

html 
<button class="btn btn-warning radius-1 mt-25 mr-2" type="button" data-toggle="collapse" data-target="#navbarMenu">
  <i class="fa fa-bars"></i>
</button>
Page Layout Sidebar
↑