Navs and Page Actions

Actionbar

This component houses the page title, the Help button and action buttons relating to content on the page.

There can be a maximum of 8 action buttons within the Actionbar. Group similar actions (ie: Print, Print a Cheque, Print Batch Cheques, Print an EFT) together in a Dropdown.
On mobile, all actions should be grouped in an "Overflow" dropdown and marked with the more_vert Material Icon. Use the .divider class on a list item to segment off similar actions.

View Accessibility Notes

Dashboard help_outline

<div class="actionbar">
<div class="btn-group-action" role="group" aria-label="Action Tools" >
    <button type="button" class="btn" rel="tooltip" data-placement="bottom" title="Add Widget" aria-label="Add Widget">
        <i class="material-icons">add</i>
    </button>
    <button type="button" class="btn" rel="tooltip" data-placement="bottom" title="Delete Widget" aria-label="Delete Widget">
        <i class="material-icons" aria-hidden="true">delete_forever</i>
    </button>
    <div class="btn-group dropdown" role="group">
        <button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Toggle Dropdown" aria-haspopup="true" rel="tooltip" data-placement="bottom" title="Print" aria-label="Print">
            <i class="material-icons">print</i>
        </button>
        <ul class="dropdown-menu" role="menu" aria-hidden="true">
            <li><a href="#" role="menuitem">Print</a></li>
			<li><a href="#" role="menuitem">Print Cheque</a></li>
			<li><a href="#" role="menuitem">Print Batch Cheques</a></li>
			<li><a href="#" role="menuitem">Print an EFT</a></li>
        </ul>
    </div>
</div>

<div class="action-bar-dropdown">
    <div class="dropdown btn-group" role="group">
        <button type="button" class="btn btn-default " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Toggle Dropdown"><i class="material-icons" aria-hidden="true">more_vert</i></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-hidden="true">
            <li><a href="#">Add Widget</a></li>
            <li><a href="#">Delete Widget</a></li>
            <li class="divider"></li>
            <li><a href="#" role="menuitem">Print</a></li>
			<li><a href="#" role="menuitem">Print Cheque</a></li>
			<li><a href="#" role="menuitem">Print Batch Cheques</a></li>
			<li><a href="#" role="menuitem">Print an EFT</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" data-toggle="modal" data-target=".help-modal">Help</a></li>
        </ul>
    </div>
</div>

<h4>Dashboard <a href="javascript:void(0);" data-toggle="modal" data-target=".help-modal" rel="tooltip" data-placement="bottom" title="Help" aria-label="Help" class="modal-button"><i class="material-icons qi-icon">help_outline</i></a></h4>
</div>