Skip to content

Design Library

Navigational context menu integration

Jenkins consists of a large and complex graph of domain objects (ModelObject), where each node in the graph is a web page and edges are hyperlinks. To help users navigate quickly on this graph, Jenkins provides a mechanism to attach context menus to model objects, which can be used to hop multiple edges without going through individual hyperlinks.

Defining context menu

To define a context menu on ModelObject, implement ModelObjectWithContextMenu.

Breadcrumb integration

Implementing ModelObjectWithContextMenu is sufficient for the core to show the context menu for your model object in the breadcrumb. Hover your mouse over the breadcrumb of this page to see context menu associated with this sample.

In addition, implementing ModelObjectWithChildren enables you to show children of your model object in the breadcrumb when you click the ‘>’ icon that separates breadcrumb items.

Model hyperlink

By adding CSS class "model-link" to the <a> tags pointing to model objects with context menu, you can enable the context menu support to that hyperlink. For example:

<a href='.' class='model-link'>self</a>self
<a href='..' class='model-link'>up</a>up

Unless the hyperlink appears inline, it is often better to pre-allocate a space for the context menu anchor that appears when the mouse hovers over. To do this, also add the "inside" CSS element. For example:

<a href='.' class='model-link inside'>self</a>self
<a href='..' class='model-link inside'>up</a>up