Fly-out menu

The fly-out menu is a hierarchical menu that puts the sub-menus to the right-hand side of the parent menu. They "fly out" of the parent menu.

The menu entries are <b:navLink /> tags supporting both AJAX and non-AJAX navigation.

You can create a submenu by grouping several menu entries in a <b:dropMenu /> tag.

Live preview

Opening submenus downwards instead of positioning them to the left-hand side

You can modify the position of the submenu with a little CSS code. For instance, you can open the submenu below the current menu item, pushing the rest of the menu downward like so:

Live preview

Reference section

Attribute Default value Description
auto-update
autoUpdate (alternative writing)
false Setting this flag updates the widget on every AJAX request.
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
content-disabled
contentDisabled (alternative writing)
false Enables or disables every child element of this container. By default, child elements are enabled.
id (none) Unique identifier of the component in a namingContainer.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
width 180px Width of the menu items. Needed to position the child menus correctly.