Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

Context menu

The context menu directives allow you to create SKY UX-themed UI Bootstrap dropdowns. The context menu module includes multiple directives.

Context menu settings

  • bb-context-menu — Creates a dropdown menu with the context menu button.
    • bb-context-menu-label(Optional.) Assigns a label to the context menu button for screen readers. By default, this will be set to "Context menu".
    • bb-context-menu-item — Creates an entry within a dropdown menu.
      • bb-context-menu-action — Specifies a function to be called when users click the menu item.
    • bb-context-append-to-body(Optional.) Indicates whether the dropdown menu should be appended to the document body when open. (Default: false)
  • bb-context-menu-button — Creates a button with the SKY UX context menu styles.
    • bb-context-menu-button-dropdown-toggle(Optional.) When specified, adds the uib-dropdown-toggle directive to the context menu button.
  • bb-submenu — Creates an accordion-style submenu within a dropdown menu. You can place the submenu within a dropdown list element.
    • bb-submenu-heading — Specifies a header for a submenu. To specify a static header, apply this as an attribute of bb-submenu. To place arbitrary content in the header, apply this as a directive within bb-submenu.

Demo

For simple dropdowns, you can use bb-context-menu-item with bb-context-menu.

{{item.text}}

For more complicated dropdowns, you can use bb-context-menu with your own dropdown list items or bb-context-menu-button to build a custom Bootstrap dropdown using the SKY UX-themed context menu button.


Last action clicked: {{contextMenuCtrl.lastAction}}

Markup

<div ng-controller="ContextMenuTestController as contextMenuCtrl">
  <div>
    <p>
      For simple dropdowns, you can use <code>bb-context-menu-item</code> with <code>bb-context-menu</code>.
    </p>
    <bb-context-menu bb-context-menu-label="Some label" bb-context-menu-append-to-body="true">
      <bb-context-menu-item ng-repeat="item in contextMenuCtrl.items" bb-context-menu-action="item.onClick()">{{item.text}}</bb-context-menu-item>
    </bb-context-menu>
  </div>

  <div>
    <p>
      For more complicated dropdowns, you can use <code>bb-context-menu</code> with your own dropdown list items or <code>bb-context-menu-button</code> to build a custom Bootstrap dropdown using the SKY UX-themed context menu button.
    </p>
    <div>
      <bb-context-menu>
        <div class="bb-dropdown-item" role="presentation">
          <a role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action Above')">Action above</a>
        </div>
        <div class="bb-dropdown-item divider"></div>
        <div class="disabled bb-dropdown-item" role="presentation">
          <a aria-disabled="true" tabindex="-1" role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action Below')">Action below</a>
        </div>
      </bb-context-menu>
    </div>
    <p></p>
    <div>
      <button type="button" class="btn btn-primary" ng-click="contextMenuCtrl.openDropdown($event)">Open third menu</button>
      <p></p>
      <div class="bb-context-menu" uib-dropdown is-open="contextMenuCtrl.isOpen">
        <bb-context-menu-button bb-context-menu-button-dropdown-toggle></bb-context-menu-button>
        <ul uib-dropdown-menu role="menu">

          <li role="presentation">
            <a class="disabled" role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action B')">Action B</a>
          </li>

          <li role="presentation">
              <bb-submenu>
                  <bb-submenu-heading>
                      Nested menu
                  </bb-submenu-heading>
                  <a role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action A')">Action A</a>
                  <a role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action A Sub')">Action A Sub</a>
              </bb-submenu>
          </li>

          <li role="presentation">
            <a class="disabled" role="menuitem" href="javascript:void(0)" ng-click="contextMenuCtrl.doAction('Action C')">Action C</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <p>
  </p>
  <hr>
  <p>
    Last action clicked: <strong>{{contextMenuCtrl.lastAction}}</strong>
  </p>
</div>

JavaScript

/* global angular */

(function () {
    'use strict';

    function ContextMenuTestController() {
        var self = this;

        self.items = [
            {
                onClick: function () {
                    self.lastAction = 'Item 1';
                },
                text: 'Item 1'
            },
            {
                onClick: function () {
                    self.lastAction = 'Item 2';
                },
                text: 'Item 2'
            },
            {
                onClick: function () {
                    self.lastAction = 'Item 3';
                },
                text: 'Item 3'
            }

        ];

        self.doAction = function (item) {
            self.lastAction = item;
        };

        self.isOpen = false;

        self.openDropdown = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            self.isOpen = true;
        };

    }
    angular.module('stache')
        .controller('ContextMenuTestController', ContextMenuTestController);

}());