Title Bar

A navigational component which can display the current screen the user is on, along with additional controls or menu items.

Title bars can have left-, right-, and center-aligned sections. You can use one, two, or all three of them in any combination. The sections are added with facets named left, right and title. The title itself can instead be set as the title property of the title for convenience.

Left Site NameRight link

Title positioned leftRight link

TitleLeftRight link

Title with markup

LeftRight link

titlebar.xhtml

Documentation


<t:titleBar>
    <f:facet name="left">Left Site Name</f:facet>
    <f:facet name="right"><a href="#">Right link</a></f:facet>
</t:titleBar>

<t:titleBar title="Title positioned left" titlePosition="left">
    <f:facet name="right"><a href="#">Right link</a></f:facet>
</t:titleBar>

<t:titleBar color="primary" title="Title">
    <f:facet name="left">Left</f:facet>
    <f:facet name="right"><a href="#">Right link</a></f:facet>
</t:titleBar>

<t:titleBar color="dark">
    <f:facet name="left">Left</f:facet>
    <f:facet name="title"><span>Title with markup</span></f:facet>
    <f:facet name="right"><a href="#">Right link</a></f:facet>
</t:titleBar>

A navigational component which can display the current screen the user is on, along with additional controls or menu items.

Info

Tag name	titleBar
Component type	io.tornadofaces.component.TitleBar
Renderer type	io.tornadofaces.component.TitleBarRenderer

Attributes

Name	Description	Required
styleClass	Styles to apply to the title bar div.	false
title	The title. Can optionally be set via the title facet.	false
style	CSS Styles applied to the title bar div.	false
titlePosition	Position of the title element. Valid options are left, right, center. Default center.	false
color	Color of the title bar. Valid options are dark, primary. Default none.	false
title	The card title is rendered in a divider.	false
rendered	Should this component be rendered?	false

Additional styling is available by setting the styleClass property. Refer to the Foundation For Apps Documentation for further information and examples.