The Sidebar navigation is used in News and Calendar.

Usage with HTML Attribute

<ul class="sidenav" data-aau="sidebar">
  <li class="default" data-element-value="0">
    <a href="#">All Categories</a>
  </li>
  <li data-element-value="1">
    <a href="#">Departments</a>
    <ul>
      <li data-element-value="2"><a href="#">Fashion</a></li>
      ...
    </ul>
  </li>
  <li data-element-value="3">
    <a href="#">University</a>
    <ul>
      <li data-element-value="4">
        <a href="#">Athletics</a>
        <ul>
          <li data-element-value="5">
            <a href="#">Men's Sports</a>
            <ul>
              <li data-element-value="6"><a href="#">Baseball</a></li>
              ...
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

HTML Attribute

Name Type Default Required Description Example
data-element-value String,
Number,
...
'' no Value of the element that will be used as a parameter for the filter
<li data-element-value="1">
  ...
</li>

Event

Name Description Parameters Example
'SidebarSelect' Fired when one element of the sidebar has been selected val: value of the selected element
$('#sidebar').on('SidebarSelect', function(ev, data){
  console.log('val:'+data.val);
});

Sign In