ACE: Sidebar Menu

Design

The Sidebar Menu can be presented as expanded or collapsed on desktop sizes. And as visible or collapsed on mobile.

The Sidebar Menu is used to structure the core menu for an application.

Code

Example	Element	Code
VIEW Document index Q&A Reports Settings Hide menu Main content	Expanded sidebar menu	HTML Classic ASP <main id="content" role="main"> <div class="ace-group ace-page-content"> <div class="ace-sidebar-menu ace-item" data-ace-expanded="true" data-ace-sidebarmenu-badges="false" data-ace-mobile-visible="false"> <div class="ace-sidebar-menu-mobile-bar"> <button class="ace-button ace-button-subtle ace-sidebar-menu-mobile-toggle ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-menu"></span><span class="ace-text">Menu</span></span></button> </div> <div class="ace-sidebar-menu-content"> <h3 class="ace-h3 ace-h3">VIEW</h3> <ul> <li><a title="Document index" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-document-text" style="color:#656662"></span><span class="ace-text">Document index</span></a></li> <li><a title="Q&A" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-question" style="color:#656662"></span><span class="ace-text">Q&A</span></a></li> <li class="ace-sidebar-menu-active"><a title="Reports" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-report" style="color:#656662"></span><span class="ace-text">Reports</span></a></li> </ul> <ul> <li><a title="Settings" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-settings" style="color:#656662"></span><span class="ace-text">Settings</span></a></li> <li data-ace-sidemenu-hide="Hide menu" data-ace-sidemenu-show="Show menu" class="ace-sidebar-menu-toggle"><a href="#" class="ace-link"><span class="ace-icon ace-icon-control-arrowleft" style="color:#656662"></span><span class="ace-text">Hide menu</span></a></li> </ul> </div> </div> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main> <main id="content" role="main"> <div class="ace-group ace-page-content"> <% ace.SidebarMenu(Array("expanded", true, "customClass", "ace-item")) ace.SidebarMenuMobileBar(Array("text", "Menu")) ace.SidebarMenuContent ace.SidebarMenuHeading(Array("text", "View")) ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Document index", "icon", "document-text", "colour", "#43a2d3")) ace.SidebarMenuItem(Array("text", "Q&A", "icon", "objects-question", "colour", "#1f9c73")) ace.SidebarMenuItem(Array("active", true, "text", "Reports", "icon", "objects-report", "colour", "#f67a50")) ace.SidebarMenuGroupEnd ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Settings", "icon", "objects-settings", "colour", "#774dca")) ace.SidebarMenuToggleItem(Array("hideText", "Hide menu", "showText", "Show menu", "icon", "control-arrowleft", "colour", "#774dca")) ace.SidebarMenuGroupEnd ace.SidebarMenuContentEnd ace.SidebarMenuEnd %> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main>
VIEW Document index Q&A Reports Settings Show menu Main content	Collapsed sidebar menu	HTML Classic ASP <main id="content" role="main"> <div class="ace-group ace-page-content"> <div class="ace-sidebar-menu ace-item" data-ace-expanded="false" data-ace-sidebarmenu-badges="false" data-ace-mobile-visible="false"> <div class="ace-sidebar-menu-mobile-bar"> <button class="ace-button ace-button-subtle ace-sidebar-menu-mobile-toggle ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-menu"></span><span class="ace-text">Menu</span></span></button> </div> <div class="ace-sidebar-menu-content"> <h3 class="ace-h3 ace-h3">VIEW</h3> <ul> <li><a title="Document index" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-document-text" style="color:#656662"></span><span class="ace-text">Document index</span></a></li> <li><a title="Q&A" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-question" style="color:#656662"></span><span class="ace-text">Q&A</span></a></li> <li class="ace-sidebar-menu-active"><a title="Reports" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-report" style="color:#656662"></span><span class="ace-text">Reports</span></a></li> </ul> <ul> <li><a title="Settings" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-settings" style="color:#656662"></span><span class="ace-text">Settings</span></a></li> <li data-ace-sidemenu-hide="Hide menu" data-ace-sidemenu-show="Show menu" class="ace-sidebar-menu-toggle"><a href="#" class="ace-link"><span class="ace-icon ace-icon-control-arrowleft" style="color:#656662"></span><span class="ace-text">Show menu</span></a></li> </ul> </div> </div> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main> <main id="content" role="main"> <div class="ace-group ace-page-content"> <% ace.SidebarMenu(Array("expanded", false, "customClass", "ace-item")) ace.SidebarMenuMobileBar(Array("text", "Menu")) ace.SidebarMenuContent ace.SidebarMenuHeading(Array("text", "View")) ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Document index", "icon", "document-text", "colour", "#43a2d3")) ace.SidebarMenuItem(Array("text", "Q&A", "icon", "objects-question", "colour", "#1f9c73")) ace.SidebarMenuItem(Array("active", true, "text", "Reports", "icon", "objects-report", "colour", "#f67a50")) ace.SidebarMenuGroupEnd ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Settings", "icon", "objects-settings", "colour", "#774dca")) ace.SidebarMenuToggleItem(Array("hideText", "Hide menu", "showText", "Show menu", "icon", "control-arrowleft", "colour", "#774dca")) ace.SidebarMenuGroupEnd ace.SidebarMenuContentEnd ace.SidebarMenuEnd %> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main>
VIEW 5Document index 14Q&A 1Reports Settings Hide menu Main content	Expanded sidebar menu with badges	HTML Classic ASP <main id="content" role="main"> <div class="ace-group ace-page-content"> <div class="ace-sidebar-menu ace-item" data-ace-expanded="true" data-ace-sidebarmenu-badges="true" data-ace-mobile-visible="false"> <div class="ace-sidebar-menu-mobile-bar"> <button class="ace-button ace-button-subtle ace-sidebar-menu-mobile-toggle ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-menu"></span><span class="ace-text">Menu</span></span></button> </div> <div class="ace-sidebar-menu-content"> <h3 class="ace-h3 ace-h3">VIEW</h3> <ul> <li><a title="Document index" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-document-text" style="color:#656662"></span><span title="5 new documents" tabindex="0" class="ace-sidebar-menu-badge">5</span><span class="ace-text">Document index</span></a></li> <li><a title="Q&A" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-question" style="color:#656662"></span><span title="14 unread questions" tabindex="0" class="ace-sidebar-menu-badge">14</span><span class="ace-text">Q&A</span></a></li> <li class="ace-sidebar-menu-active"><a title="Reports" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-report" style="color:#656662"></span><span title="1 active report" tabindex="0" class="ace-sidebar-menu-badge">1</span><span class="ace-text">Reports</span></a></li> </ul> <ul> <li><a title="Settings" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-settings" style="color:#656662"></span><span class="ace-text">Settings</span></a></li> <li data-ace-sidemenu-hide="Hide menu" data-ace-sidemenu-show="Show menu" class="ace-sidebar-menu-toggle"><a href="#" class="ace-link"><span class="ace-icon ace-icon-control-arrowleft" style="color:#656662"></span><span class="ace-text">Hide menu</span></a></li> </ul> </div> </div> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main> <main id="content" role="main"> <div class="ace-group ace-page-content"> <% ace.SidebarMenu(Array("expanded", true, "badges", true, "customClass", "ace-item")) ace.SidebarMenuMobileBar(Array("text", "Menu")) ace.SidebarMenuContent ace.SidebarMenuHeading(Array("text", "View")) ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Document index", "icon", "document-text", "colour", "#43a2d3", "badgeText", "5", "badgeTitle", "5 new documents")) ace.SidebarMenuItem(Array("text", "Q&A", "icon", "objects-question", "colour", "#1f9c73", "badgeText", "14", "badgeTitle", "14 unread questions")) ace.SidebarMenuItem(Array("active", true, "text", "Reports", "icon", "objects-report", "colour", "#f67a50", "badgeText", "1", "badgeTitle", "1 active report")) ace.SidebarMenuGroupEnd ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Settings", "icon", "objects-settings", "colour", "#774dca")) ace.SidebarMenuToggleItem(Array("hideText", "Hide menu", "showText", "Show menu", "icon", "control-arrowleft", "colour", "#774dca")) ace.SidebarMenuGroupEnd ace.SidebarMenuContentEnd ace.SidebarMenuEnd %> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main>
VIEW 5Document index 14Q&A 1Reports Settings Show menu Main content	Collapsed sidebar menu with badges	HTML Classic ASP <main id="content" role="main"> <div class="ace-group ace-page-content"> <div class="ace-sidebar-menu ace-item" data-ace-expanded="false" data-ace-sidebarmenu-badges="true" data-ace-mobile-visible="false"> <div class="ace-sidebar-menu-mobile-bar"> <button class="ace-button ace-button-subtle ace-sidebar-menu-mobile-toggle ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-menu"></span><span class="ace-text">Menu</span></span></button> </div> <div class="ace-sidebar-menu-content"> <h3 class="ace-h3 ace-h3">VIEW</h3> <ul> <li><a title="Document index" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-document-text" style="color:#656662"></span><span title="5 new documents" tabindex="0" class="ace-sidebar-menu-badge">5</span><span class="ace-text">Document index</span></a></li> <li><a title="Q&A" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-question" style="color:#656662"></span><span title="14 unread questions" tabindex="0" class="ace-sidebar-menu-badge">14</span><span class="ace-text">Q&A</span></a></li> <li class="ace-sidebar-menu-active"><a title="Reports" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-report" style="color:#656662"></span><span title="1 active report" tabindex="0" class="ace-sidebar-menu-badge">1</span><span class="ace-text">Reports</span></a></li> </ul> <ul> <li><a title="Settings" tabindex="0" class="ace-link"><span class="ace-icon ace-icon-objects-settings" style="color:#656662"></span><span class="ace-text">Settings</span></a></li> <li data-ace-sidemenu-hide="Hide menu" data-ace-sidemenu-show="Show menu" class="ace-sidebar-menu-toggle"><a href="#" class="ace-link"><span class="ace-icon ace-icon-control-arrowleft" style="color:#656662"></span><span class="ace-text">Show menu</span></a></li> </ul> </div> </div> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main> <main id="content" role="main"> <div class="ace-group ace-page-content"> <% ace.SidebarMenu(Array("expanded", false, "badges", true, "customClass", "ace-item")) ace.SidebarMenuMobileBar(Array("text", "Menu")) ace.SidebarMenuContent ace.SidebarMenuHeading(Array("text", "View")) ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Document index", "icon", "document-text", "colour", "#43a2d3", "badgeText", "5", "badgeTitle", "5 new documents")) ace.SidebarMenuItem(Array("text", "Q&A", "icon", "objects-question", "colour", "#1f9c73", "badgeText", "14", "badgeTitle", "14 unread questions")) ace.SidebarMenuItem(Array("active", true, "text", "Reports", "icon", "objects-report", "colour", "#f67a50", "badgeText", "1", "badgeTitle", "1 active report")) ace.SidebarMenuGroupEnd ace.SidebarMenuGroup ace.SidebarMenuItem(Array("text", "Settings", "icon", "objects-settings", "colour", "#774dca")) ace.SidebarMenuToggleItem(Array("hideText", "Hide menu", "showText", "Show menu", "icon", "control-arrowleft", "colour", "#774dca")) ace.SidebarMenuGroupEnd ace.SidebarMenuContentEnd ace.SidebarMenuEnd %> <div class="ace-item ace-page-content-content"> <p>Main content</p> </div> </div> </main>

Javascript

Methods

To initialise Sidebar Menus, use the init method, eg:


                                    $(document).ready(function(){
                                      ACE.SidebarMenu.init();
                                    });

Optional Methods

Function	Arguments	Description	Example
toggle	jQuery element or selector	Toggle the menu(s) matching the jQuery selector. If they are expanded on the desktop, they will be collapsed; and vice versa.	`ACE.SidebarMenu.toggle('#yourid');`
expand	jQuery element or selector	Expand the menu(s) matching the jQuery selector on the desktop.	`ACE.SidebarMenu.expand('#yourid');`
collapse	jQuery element or selector	Collapse the menu(s) matching the jQuery selector on desktop and mobile.	`ACE.SidebarMenu.collapse('#yourid');`
toggleMobile	jQuery element or selector	Toggle the menu(s) matching the jQuery selector. If they are visible, they will be collapsed; and vice versa.	`ACE.SidebarMenu.toggleMobile('#yourid');`
showMobile	jQuery element or selector	Show the menu(s) matching the jQuery selector on mobile.	`ACE.SidebarMenu.showMobile('#yourid');`

Events

Event Description Usage Example

ACE.ExpanderPanel.Toggled

Fires when an Expander Panel has been expanded or collapsed. Passes an object with the new state.

Event	Description	Usage Example
ACE.ExpanderPanel.Toggled	Fires when an Expander Panel has been expanded or collapsed. Passes an object with the new state.	`$(document).on('ACE.SidebarMenu.Toggled', function(e, details){ console.log(e.target); console.log('#' + e.target.id + ' has been toggled to ' + details.state); });`
ACE.ExpanderPanel.ToggledMobile	Fires when an Expander Panel has been expanded or collapsed. Passes an object with the new state.	`$(document).on('ACE.ExpanderPanel.ToggledMobile', function(e, details){ console.log(e.target); console.log('#' + e.target.id + ' has been toggled on mobile to' + details.state); });`


                                                                    $(document).on('ACE.SidebarMenu.Toggled', function(e, details){
                                                                      console.log(e.target);
                                                                      console.log('#' + e.target.id + ' has been toggled to ' + details.state);
                                                                    });

ACE.ExpanderPanel.ToggledMobile

Fires when an Expander Panel has been expanded or collapsed. Passes an object with the new state.


                                                              $(document).on('ACE.ExpanderPanel.ToggledMobile', function(e, details){
                                                                console.log(e.target);
                                                                console.log('#' + e.target.id + ' has been toggled on mobile to' + details.state);
                                                              });

Design

Code

VIEW

VIEW

VIEW

VIEW

Javascript

Methods

Optional Methods

Events

Elements

Foundation

Patterns

Labs

ACE