NavLinks and NavCommandLinks

The NavLink is a very versatile component you can use for different purposes.

The b:navLink tag is a more powerful version of the standard JSF h:link tag.

This means that you can use the outcome, fragment and href attributes.

NavLinks can be used in:

There are five kinds of <b:navLink: />

changed in 0.8.1 For some technical reason, in BootsFaces 0.8.0 the <b:navLink /> component couldn't call JSF action listeners. To circumvent this limitation, there's a second component, we added <b:navCommandLink />. The advantage of <b:navCommandLink /> is that is can be use the actionListener and action attributes. The disadvantage is that is has to be put in a <h:form />. Other than that, both components are identical. In particular, both components support the new unified AJAX API introduced with BootsFaces 0.8.0. You only see the differences when you try to use the standard JSF AJAX API.


The outcome link, the external link and the JavaScript link can have an icon adding the attribute icon (on the left or right, default is left).

You can control the icon position by specifying it in the attribute iconAlign.

The Icon attribute will add a Glyphicon icon (Bootstrap's default), but now you can also use a Font Awesome icon using the iconAwesome attribute instead of icon.

Both icon and iconAwesome attributes, require the icon name as value, without the trailing glyphicon- prefix and fa- prefix respectively.

Hint Bootstrap 4 is going to drop support for the Glyphicon library. We recommend you to choose icons from the Font Awesome library to avoid future incompatibilities.

In the following example the b:listLinks tag is used as a container for the NavLinks, showing how to create a Sidebar with links.

Live preview

TabLinks since 0.8.5

<b:tabLinks /> comes in handy if you want to render a tab strip, but don't want to use a <b:tabView />. The example below renders five hyperlinks as <b:navLink /> or <b:navCommandLink />. The result looks like an ordinary <b:tabView />, but behaves differently. However, using AJAX and <b:navCommandLink /> you can build your own tabView component. This may give you an edge over the "carefree package" if you need more flexibility than the standard <b:tabView /> offers.


Pill links since 0.8.5

The <b:pillLinks /> component resembles the <b:tabLinks /> component, but the layout is slightly different.

Live preview


Solitary navLinks

A <b:navLink /> can also be used as a solitary component. In that case, it's replaces an ordinary <h:link />. Similary, a <b:navCommandlink /> can be used in place of an <h:commandLink />. Note that the HTML code renders differs slightly from the HTML code of embedded <b:navLink />. It's an HTML <span /> attribute (as opposed to the <li /> of the embedded version) because solitary links are not part of a list.

A <b:navLink />: Slider

A <h:navCommandlink /> using AJAX: actionListener

Combining <b:navLink /> with <ui:repeat />:

Jazz

Rock

Rhythm and Blues

Punk

Heavy Metal


Opening a modal dialog in a NavLink

To open a modal dialog from a NavLink, don't use the attributes data-target and data-toggle. Use an onclick handler instead:

Arbitrary content in a <b:navLink />since 0.8.1

<b:navLink /> isn't limited to text and icons. You can add arbitrary widgets as children of the <b:navLink />:

Live preview

As you can see, the nested content is always rendered between the text and the label. However, in most cases you may want to consider moving the text and the icon (if there are any) into the nested content. This way, the JSF source code looks a bit cleaner.

Icons and icon modifiers improved in 0.9.0

You can add Fontawesome icons and Glyphicons to navLinks, navCommandLinks and dropmenus. These icons can be decorated with modifiers:

Thumbs up or thumbs down?
big thumbs up!
even bigger thumbs up!
left-hand thumbs up
go back
Glyphicon

AJAX since 0.8.1

Both <b:navCommandLink /> and <b:navLink /> support the new unified AJAX API introduced with BootsFaces 0.8.1. <b:navCommandLink /> also supports the traditional and the PrimeFaces AJAX API (to a certain extent).

Using b:navLink with AJAX

Live preview

This is the default page.

Using b:navCommandLink with AJAX

Using <b:navCommandLink /> isn't much different from using <b:navLink />. You have to put it in a <h:form />. On the plus side, you are rewarded with being allowed to use the attributes action and actionListener.

Live preview

This is the default page.

Reference section

Attribute Default value Description
action (none) The button action, this can be method expression or a string outcome.
action-listener
actionListener (alternative writing)
(none) A method expression that refers to a method with this signature: void methodName(Action-Event).
active false Adds the active state to the link.
ajax false Whether the navLink submits the form with AJAX.
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
content-class
contentClass (alternative writing)
(none) content-class is optional: if specified, the content (i.e. the anchor tag) will be displayed with this specific class
content-style
contentStyle (alternative writing)
(none) Inline style of the content area (i.e the anchor tag).
disabled false Boolean value to specify if the button is disabled.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
fragment (none) The fragment that is to be appended to the target URL. The # separator is applied automatically and needs not be included.
header (none) If present, this element is rendered as Header in a menu with the text specifide by this attribute value: all other attributes will be ignored.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
href (none) Specifies the URL of the page the link goes to.
icon (none) Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute.
icon-align
iconAlign (alternative writing)
(none) Alignment can be right or left.
icon-awesome
iconAwesome (alternative writing)
(none) Navigation Link Font Awesome Icon, can be one of the Font Awesome icon names. Alignment can be specified with the icon-align attribute.
icon-flip
iconFlip (alternative writing)
(none) Flip the icon: can be H (horizontal) or V (vertical).
icon-rotate
iconRotate (alternative writing)
(none) Rotate 90 degrees the icon: Can be L,R.
icon-size
iconSize (alternative writing)
(none) Icon Size: legal values are lg, 2x, 3x, 4x, 5x.
icon-spin
iconSpin (alternative writing)
false Boolean value: if true the icon will spin.
id (none) Unique identifier of the component in a namingContainer.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
include-view-params
includeViewParams (alternative writing)
false Set whether or not the page parameters should be encoded into the target url.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
onblur (none) Client side callback to execute when input element loses focus.
onchange (none) Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick (none) The onclick attribute.
oncomplete (none) JavaScript to be executed when ajax completes with success.
ondblclick (none) Client side callback to execute when input element is double clicked.
onfocus (none) Client side callback to execute when input element receives focus.
onkeydown (none) Client side callback to execute when a key is pressed down over input element.
onkeypress (none) Client side callback to execute when a key is pressed and released over input element.
onkeyup (none) Client side callback to execute when a key is released over input element.
onmousedown (none) Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove (none) Client side callback to execute when a pointer input element is moved within input element.
onmouseout (none) Client side callback to execute when a pointer input element is moved away from input element.
onmouseover (none) Client side callback to execute when a pointer input element is moved onto input element.
onmouseup (none) Client side callback to execute when a pointer input element is released over input element.
onselect (none) Client side callback to execute when text within input element is selected by user.
outcome (none) The outcome to navigate to.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style
style-class
styleClass (alternative writing)
(none) CSS style class
tabindex (none) Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
target (none) Optional target of the HTML anchor tag that's rendered. E.g. # opens the link in a new tab. This attribute is only evaluated if you provide an href.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
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".
update (none) Component(s) to be updated with ajax.
value (none) Navigation Link text.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
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".
Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
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".
Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
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".