Responsive Sidebar Navigation for Admin & Dashboard

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project ;)

Creating the structure

The HTML structure is composed by 2 main elements: a <header> element, containing the website logo, the search form, the navigation trigger (.cd-nav-trigger – mobile version only) and the top navigation, and a <main> element containing the page main content (div.content-wrapper) and the sidebar navigation (nav.cd-side-nav).

<header class="cd-main-header">
 <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
 
 <div class="cd-search">
  <form action="#0">
   <input type="search" placeholder="Search...">
  </form>
 </div> <!-- cd-search -->
 
 <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 
 <nav class="cd-nav">
  <ul class="cd-top-nav">
   <li><a href="#0">Tour</a></li>
   <li><a href="#0">Support</a></li>
   <li class="has-children account">
    <a href="#0">
     <img src="img/cd-avatar.png" alt="avatar">
     Account
    </a>
 
    <ul>
     <li><a href="#0">My Account</a></li>
     <!-- other list items here -->
    </ul>
   </li>
  </ul>
 </nav>
</header> <!-- .cd-main-header -->
 
<main class="cd-main-content">
 <nav class="cd-side-nav">
  <ul>
   <li class="cd-label">Main</li>
   <li class="has-children overview">
    <a href="#0">Overview</a>
    
    <ul>
     <li><a href="#0">All Data</a></li>
     <!-- other list items here -->
    </ul>
   </li>
   <li class="has-children notifications active">
    <a href="#0">Notifications<span class="count">3</span></a>
    
    <ul>
     <li><a href="#0">All Notifications</a></li>
     <!-- other list items here -->
    </ul>
   </li>
 
   <!-- other list items here -->
  </ul>
 
  <!-- other unordered lists here -->
 </nav>
 
 <div class="content-wrapper">
  <!-- main content here -->
 </div> <!-- .content-wrapper -->
</main> <!-- .cd-main-content -->

In the starting HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>, while on mobile devices they are moved inside the .cd-side-nav element (more in the Events Handling section).

Adding style

We created 3 different sidebar configurations, according to the screen size.

On small devices, the sidebar has a 100% width, is in absolute position and hidden by default (visibility: hidden). When the user clicks/taps the .cd-nav-trigger, the sidebar visibility is changed to visible (using the .nav-is-visible class).

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

On medium size devices (viewport width more than 768px), a minified version of the sidebar is visible by default: it is in relative position, has a fixed width (110px)  and a float: left so that it is on the left side of the <main> element.

In most cases the HTML is simply a nav with some anchors:

@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: relative;
    float: left;
    width: 110px;
    /* reset style */
    visibility: visible;
    opacity: 1;
  }
}
 
@media only screen and (min-width: 768px) { 
 .cd-main-content .content-wrapper { 
 margin-left: 110px; 
 } 
} 

On bigger devices (viewport width more than 1170px), the expanded version of the sidebar is shown.

Events handling

In the starting HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>.

On small devices (viewport width less than 1170px), we move these elements inside the

.cd-side-nav navigation.

In most cases the HTML is simply a nav with some anchors:

var resizing = false;
moveNavigation();
$(window).on('resize', function(){
 if( !resizing ) {
  window.requestAnimationFrame(moveNavigation);
  resizing = true;
 }
});
 
function moveNavigation(){
 var mq = checkMQ(); //this function returns mobile,tablet or desktop 
 
 if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')
 detachElements();
 topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')
 searchForm.prependTo(sidebar);
 } else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
 detachElements();
 searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')
 topNavigation.appendTo(header.find('.cd-nav'));
 }
 resizing = false;
}
 
function detachElements() {
 topNavigation.detach();//topNavigation = $('.cd-top-nav')
 searchForm.detach();//searchForm = $('.cd-search')
}

Besides, we integrated the jQuery-menu-aim plugin to differentiate between users trying hover over a sidebar item and  user trying to navigate into a submenu’s contents (desktop version only).

TeezCom Coding LibraryTeezCom