Dashboard Menu

---

General Menu Default

Dashboard Menu is a particular menu type used in the dashboard area of the theme. Compared with the default menu, this is a vertical menu and can have multiple structures.

Considering UI / UX standards, we built this menu on mobile in a sticky burget icon.

---

Structure

Dashboard Menu doesn't have a fixed structure and that it is why we are going to showcase two examples from our theme:

Menu with lists

Copy
<div class="dashboard-menu has-submenu" tabindex="0">
    <a href="#" class="item">
        <i class="icon icon-side-sticky-menu"></i>
    </a>
    <ul class="submenu" tabindex="-1">
        <li class="active"><a class="item" href="">Item 01</a></li>
        <li><a class="item" href="">Item 02</a></li>
        <li><a class="item" href="">Item 03</a></li>
        ...
    </ul>
</div>

Menu with accordion

Copy
<div class="dashboard-menu has-submenu" tabindex="0">
    <a href="#" class="item">
        <i class="icon icon-side-sticky-menu"></i>
    </a>
    <ul class="submenu" tabindex="-1">
       <li>
           <div class="ui accordion">
               <div class="title accordion-trigger">
                    <a class="item">Item 01</a>
               </div>
               <div class="content">
                   <div class="accordion">
                       <div class="title"><a href="" class="item">Submenu 01</a></div>
                       <div class="title"><a href="" class="item">Submenu 02</a></div>
                       <div class="title"><a href="" class="item">Submenu 03</a></div>
                   </div>
               </div>
               
               <div class="title accordion-trigger">
                   <a class="item">Item 02</a>
               </div>
               <div class="content">
                    <div class="accordion">
                       <div class="title"><a href="" class="item">Submenu 01</a></div>
                       <div class="title"><a href="" class="item">Submenu 02</a></div>
                       <div class="title"><a href="" class="item">Submenu 03</a></div>
                   </div>    
               </div>
               
               ...
           </div>
       </li>
    </ul>
</div>

---

Sticky Option

As you can see also in this page, dashboard menu can become sticky on scroll. This functionalit relies on sticky element feature.

Structure for the sticky option is the following:

Copy
<div class="sticky-element sticky-desktop sticky-large-desktop under-ths">
    <div class="dashboard-sticky">
        <div class="dashboard-sticky-inner">
            <div class="dashboard-menu has-submenu">
                <a href="#" class="item">
                    <i class="icon icon-side-sticky-menu"></i>
                </a>
                <ul class="submenu" tabindex="-1">
                   <li>
                       <div class="ui accordion">
                           <div class="title accordion-trigger">
                                <a class="item">Item 01</a>
                           </div>
                           <div class="content">
                               <div class="accordion">
                                   ...
                               </div>
                           </div>

                           <div class="title accordion-trigger">
                               <a class="item">Item 02</a>
                           </div>
                           <div class="content">
                                <div class="accordion">
                                   ..
                               </div>    
                           </div>
                            ...
                       </div>
                   </li>
                </ul>
            </div>
        </div>
    </div>
</div>

---

Responsive

If used along with the sticky element, on mobile resolution dashboard menu will transform in a sticky burger menu. Clicking it will open a dropdown with the entire menu.

---

Other Elements

You can also include the following structures along with the menu:

• .dashboard-details
• .dashboard-contact

Details

Copy
<div class="dashboard-details">
    <span class="dashboard-avatar verified-sq">
        <img src="assets/images/avatar_02.jpg" alt="">
    </span>

    <div class="dashboard-texts">
        <h2 class="dashboard-name">Esther Herrera</h2>
        <div class="dashboard-subtitle">CEO</div>
    </div>
</div>

Contact

Contact

Copy
<a class="dashboard-contact button-sq font-weight-bold-sq modal-ui-trigger" data-trigger-for="modal02" href="">
   <i class="icon icon-messenger"></i>
   <span>Contact</span>
</a>

By adding these two structures with the menu in a sticky element, on mobile we will have the following result:

---