Action-bar

The action-bar is a toolbar with an horizontal row of buttons or links that give the user a constantly visible reminder of and an easy way to select specific application functions.

Fixed & responsive

The component uses position:fixed. On small screens the content is accessible via a "hamburger" menu.

Contains a navbar aligned to the right - the default, and a navbar aligned to the left usually for filtering options.



Large menu

When you have too many items to add, pick 2 or 3 from the most used and insert the remaining in a dropdown.

<div class="c8y-toolbar-spacer page-toolbar">
  <div class="c8y-toolbar navbar navbar-default">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" ng-click="isPageToolbarExpanded = !isPageToolbarExpanded" aria-expanded="false">
        <span class="sr-only">Toggle Toolbar</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="page-toolbar" class="navbar-collapse text-center collapse" uib-collapse="!isPageToolbarExpanded" aria-expanded="false" aria-hidden="true" style="height: 0px;">

      <ul class="nav navbar-nav  navbar-left"> <!-- optional secondary navbar -->
        <li> <!-- for .btn.btn-link -->
          <button class="btn btn-link"><i class="[button icon]"></i> button label</button>
        </li>
        <li class="btn-group"> <!-- for button groups --></li>
        <li class="navbar-form"> <!-- for form elements --></li>
      </ul>
      <ul class="nav navbar-nav  navbar-right"><!-- primary navbar -->
        <li>
          <button type="button" class="btn btn-link">
            <i class="fa fw fa-refresh"></i> Reload
          </button>
        </li>
        <li>
          <!-- include a dropdown when you have too many options -->
          <div class="dropdown" uib-dropdown="">
            <button class="dropdown-toggle c8y-dropdown" data-toggle="dropdown" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="false"><span translate=""><span class="ng-scope">More…</span></span><i class="fa fa-caret-down"></i></button>
            <ul class="dropdown-menu dropdown-menu-right" uib-drodown-menu="">
              <li>
                <a href=""><i class="fa fa-file-text-o"></i> Download as CSV</a>
              </li>
              <li>
                <a href=""><i class="fa fa-file-excel-o"></i> Download as Excel</a>
              </li>
              <li>
                <a href=""><i class="fa fa-mail-forward"></i> Send as widget to dashboard</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>