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-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-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);

}());