Authors:Bill Keese


_KeyNavContainer extends dijit/_Container to provide keyboard navigation support. Specifically:

  • The user can navigate using the arrow keys, either LEFT/RIGHT or UP/DOWN depending on the orientation of the widget, and HOME/END keys.
  • The user can jump to any given widget by typing one or more letters of the label of that widget.

To use this mixin, call connectKeyNavHandlers() in postCreate(), listing the keys for navigating to the previous and next widgets.

Also, child widgets must implement a focus() method.


    "dojo/_base/declare", "dojo/keys", "dojo/parser", "dojo/query",
    "dijit/_WidgetBase", "dijit/_KeyNavContainer", "dojo/domReady!"
], function(declare, keys, parser, query,  _WidgetBase, _KeyNavContainer){
    MyMenu = declare([_WidgetBase, _KeyNavContainer], {
        buildRendering: function(){
            // This is a behavioral widget so we'll just use the existing DOM.
            // Alternately we could have a template.

            // Set containerNode.   Usually this is set in the template.
            this.containerNode = this.domNode;

        postCreate: function(){
            // Don't forget the this.inherited() call

            // Setup keyboard navigation
            this.connectKeyNavHandlers([keys.UP_ARROW], [keys.DOWN_ARROW]);

            // Set tabIndex on the container <table> node, since by default it's not tab navigable
            this.domNode.setAttribute("tabIndex", "0");

    MyMenuItem = declare(_WidgetBase, {
        postCreate: function(){
            this.domNode.setAttribute("tabIndex", "-1");
        focus: function(){

table, td {
    border: 1px solid gray;
td:focus {
    background-color: yellow;
<table data-dojo-type="MyMenu">
        <tr><td data-dojo-type="MyMenuItem">apple</td></tr>
        <tr><td data-dojo-type="MyMenuItem">banana</td></tr>
        <tr><td data-dojo-type="MyMenuItem">orange</td></tr>
        <tr><td data-dojo-type="MyMenuItem">pear</td></tr>
        <tr><td data-dojo-type="MyMenuItem">grapes</td></tr>
        <tr><td data-dojo-type="MyMenuItem">strawberry</td></tr>
Error in the documentation? Can’t find what you are looking for? Let us know!