UNPKG

gojs/intro/contextMenus.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Context Menus -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Context Menus</h1>
137<p>
138<b>GoJS</b> provides a mechanism for you to define context menus for any object or for the diagram background.
139</p>
140
141<p class="box" style="background-color: lightgoldenrodyellow;">
Note: GoJS context menus cannot render outside of Diagrams, because they are objects inside the Diagram and therefore drawn only on the Diagram.
If you need a context menu drawn partially or fully outside the Diagram, consider making an <a href="#HTMLContextMenus">HTML context menu</a>.
144</p>
145
146<p>
147A GoJS context menu is an <a>Adornment</a> that is shown when the user context-clicks (right mouse click or long touch hold)
148an object that has its <a>GraphObject.contextMenu</a> set.
149The context menu is bound to the same data as the part itself.
150</p>
151<p>
152See samples that make use of context menus in the <a href="../samples/index.html#contextmenus">samples index</a>.
153</p>
154<p>
155It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s,
156as you can see in the code below in the assignment of the Node's <a>GraphObject.contextMenu</a> and <a>Diagram.contextMenu</a> properties.
157Each "ContextMenu" is just a "Vertical" Panel <a>Adornment</a> that is shadowed.
158Each "ContextMenuButton" is a Panel on which you can set the <a>GraphObject.click</a> event handler.
159In the event handler <code>obj.part</code> will be the whole context menu Adornment.
160<code>obj.part.adornedPart</code> will be adorned Node or Link.
161The bound data is <code>obj.part.data</code>, which will be the same as <code>obj.part.adornedPart.data</code>.
162</p>
163<p>
164You can see how the "ContextMenu" and "ContextMenuButton" builders are defined at
165<a href="../extensions/Buttons.js">Buttons.js</a>.
166There are examples of customizing buttons at <a href="buttons.html">Introduction to Buttons</a>.
167</p>
168<p>
169In this example each <a>Node</a> has its <a>GraphObject.contextMenu</a> property set to an Adornment that shows
170a single button that when clicked changes the color property of the bound model data.
171The diagram gets its own context menu by setting <a>Diagram.contextMenu</a>.
172</p>
173<pre class="lang-js" id="contextmenus"><code>
// This method is called as a context menu button's click handler.
// Rotate the selected node's color through a predefined sequence of colors.
function changeColor(e, obj) {
  diagram.commit(function(d) {
    // get the context menu that holds the button that was clicked
    var contextmenu = obj.part;
    // get the node data to which the Node is data bound
    var nodedata = contextmenu.data;
    // compute the next color for the node
    var newcolor = "lightblue";
    switch (nodedata.color) {
      case "lightblue": newcolor = "lightgreen"; break;
      case "lightgreen": newcolor = "lightyellow"; break;
      case "lightyellow": newcolor = "orange"; break;
      case "orange": newcolor = "lightblue"; break;
    }
    // modify the node data
    // this evaluates data Bindings and records changes in the UndoManager
    d.model.set(nodedata, "color", newcolor);
  }, "changed color");
}
195
// this is a normal Node template that also has a contextMenu defined for it
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key")),
    {
      contextMenu:     // define a context menu for each node
        $("ContextMenu",  // that has one button
          $("ContextMenuButton",
            {
              "ButtonBorder.fill": "white",
              "_buttonFillOver": "skyblue"
            },
            $(go.TextBlock, "Change Color"),
            { click: changeColor })
          // more ContextMenuButtons would go here
        )  // end Adornment
    }
  );
218
// also define a context menu for the diagram's background
diagram.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      $(go.TextBlock, "Undo"),
      { click: function(e, obj) { e.diagram.commandHandler.undo(); } },
      new go.Binding("visible", "", function(o) {
                                        return o.diagram.commandHandler.canUndo();
                                      }).ofObject()),
    $("ContextMenuButton",
      $(go.TextBlock, "Redo"),
      { click: function(e, obj) { e.diagram.commandHandler.redo(); } },
      new go.Binding("visible", "", function(o) {
                                        return o.diagram.commandHandler.canRedo();
                                      }).ofObject()),
    // no binding, always visible button:
    $("ContextMenuButton",
      $(go.TextBlock, "New Node"),
      { click: function(e, obj) {
        e.diagram.commit(function(d) {
          var data = {};
          d.model.addNodeData(data);
          part = d.findPartForData(data);  // must be same data reference, not a new {}
          // set location to saved mouseDownPoint in ContextMenuTool
          part.location = d.toolManager.contextMenuTool.mouseDownPoint;
        }, 'new node');
      } })
  );
247
var nodeDataArray = [
  { key: "Alpha", color: "lightyellow" },
  { key: "Beta", color: "orange" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.undoManager.isEnabled = true;
257</code></pre>
258<script>goCode("contextmenus", 350, 200)</script>
259<p>
260Try context clicking a node and invoking the "Change Color" command a few times.
261With the diagram context menu you will be able to "Undo" and/or "Redo", or you can use Control-Z and/or Control-Y.
262</p>
263
264<h2 id="Positioning">Positioning</h2>
265<p>
266There are two ways to customize the positioning of the context menu relative to the adorned GraphObject.
267One way is to override <a>ContextMenuTool.positionContextMenu</a>.
268Another way is to have the context menu <a>Adornment</a> include a <a>Placeholder</a>.
269The Placeholder is positioned to have the same size and position as the adorned object.
270The context menu will not to have a background, and thus will not display a shadow by default when using a Placeholder.
271</p>
272<pre class="lang-js" id="contextmenusplaceholder"><code>
// this is a shared context menu button click event handler, just for demonstration
function cmCommand(e, obj) {
  var node = obj.part.adornedPart;  // the Node with the context menu
  var buttontext = obj.elt(1);  // the TextBlock
  alert(buttontext.text + " command on " + node.data.key);
}
279
// this is a normal Node template that also has a contextMenu defined for it
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key")),
    {
      contextMenu:                            // define a context menu for each node
        $("ContextMenu", "Spot",              // that has several buttons around
          $(go.Placeholder, { padding: 5 }),  // a Placeholder object
          $("ContextMenuButton", $(go.TextBlock, "Top"),
            { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, click: cmCommand }),
          $("ContextMenuButton", $(go.TextBlock, "Right"),
            { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, click: cmCommand }),
          $("ContextMenuButton", $(go.TextBlock, "Bottom"),
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, click: cmCommand }),
          $("ContextMenuButton", $(go.TextBlock, "Left"),
            { alignment: go.Spot.Left, alignmentFocus: go.Spot.Right, click: cmCommand })
        )  // end Adornment
    }
  );
303
var nodeDataArray = [
  { key: "Alpha", color: "lightyellow" },
  { key: "Beta", color: "orange" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
312</code></pre>
313<script>goCode("contextmenusplaceholder", 350, 200)</script>
314
315<h2 id="HTMLContextMenus">HTML Context Menus</h2>
316<p>
317It is possible to define custom context menus using HTML instead of Adornments using the <a>HTMLInfo</a> class.
318The <a href="../samples/customContextMenu.html">Custom Context Menu sample</a> and
319<a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> show two such custom context menus.
320</p>
321<p>
322HTML context menus require more effort to implement than using the default <b>GoJS</b> "ContextMenu" and "ContextMenuButton".
323However you would have the full power of HTML/CSS/JavaScript to show whatever you want.
324This includes creating context menus that can exist or float outside of the Diagram.
325</p>
326<p>
There are two primary considerations when authoring HTML and CSS for context menus.
The context menu should usually be a sibling Element of the Diagram, and should never be nested inside a Diagram DIV:
329</p>
330
331<pre class="lang-js"><code>
332&lt;div style="position: relative;"&gt;
&lt;div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px;"&gt;&lt;/div&gt;
&lt;div id="contextMenu"&gt;
  &lt;!-- ... context menu HTML --&gt;
&lt;/div&gt;
337&lt;/div&gt;
338</code></pre>
339
340<p>
And the ContextMenu may need a z-index set to ensure it is always on top. GoJS Diagrams have z-index of 2, and some tools a z-index of 100.
342</p>
343
344<pre class="lang-css"><code>#contextMenu {
z-index: 1000;
...
347}
348</code></pre>
349
350<p>
See the <a href="../samples/customContextMenu.html">Custom Context Menu sample</a> and
<a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> for HTML examples.
See the <a href="HTMLInteraction.html">HTMLInteraction</a> page for more discussion on HTML in GoJS.
354</p>
355
356<h2 id="DefaultContextMenuForTouchEnabledDevices">Default Context Menu for Touch-enabled devices</h2>
357<p>
358Touch devices are presumed to have no keyboard ability, which makes actions like copying and pasting more difficult.
359Because of this, <b>GoJS</b> provides a built-in default context menu on touch devices, implemented in HTML.
360The buttons on this menu are populated dynamically, depending on the target GraphObject (if any) and Diagram and their properties.
361</p>
362<p>
363The default context menu can be disabled by setting <a>ContextMenuTool.defaultTouchContextMenu</a> to null.
364The <a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> contains a re-implementation of this menu if you wish to modify it.
365</p>
366<p>
367If you define your own custom context menus, they will prevent the default context menu from appearing on touch devices.
368We recommend that your custom context menus include all common commands appropriate for your app.
369</p>
370
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
381
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
444
            </ul>
          </li>
        </ul>
448
449
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
455</footer>  </body>
456
457<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
458<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
469
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
479</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
495</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Context Menus -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`