Bar

<tc:bar/> is a container which display elements in one single line as long as there is enough space. If space is too narrow, the bar collapse. Hidden items are accessible by clicking on the bar-icon.

Additionally the facet <f:facet name="brand"/> can be added. It shows the 'brand', a logo, text or both on the left site of the bar.

Tag Library Documentation

Example

This example show a dark bar with a 'brand' facet, a menu and right side content inside an 'after' facet.

The bar should collapse on large size, so the markup large is added.

<tc:bar markup="large, dark">
  <tc:style customClass="bg-dark"/>
  <f:facet name="brand">
    <tc:link label="BRAND" outcome="/content/000-intro/Intro.xhtml"/>
  </f:facet>
  <tc:links>
    <tc:link label="Link One"/>
    <tc:link label="Link Two"/>
  </tc:links>
  <f:facet name="after">
    <tc:flexLayout columns="1fr  auto">
      <tc:in placeholder="Search" labelLayout="skip"/>
      <tc:button label="Go"/>
    </tc:flexLayout>
  </f:facet>
</tc:bar>

Centered Menu Example

This example shows how to center content.

<tc:bar markup="large, dark">
  <tc:style customClass="bg-dark"/>
  <f:facet name="brand">
    <tc:link label="BRAND" outcome="/content/000-intro/Intro.xhtml"/>
  </f:facet>
  <div class="ml-auto">
    // centered content
  </div>
  <f:facet name="after">
    // right side content
  </f:facet>
</tc:bar>

Bar with dropdown

An example of a dropdown menu with radio entries.

Background Color

Some examples with different background colors.

For dark backgrounds, add the dark markup value.
For light background choose light markup.

<tc:bar markup="large, dark">
  <tc:style customClass="bg-dark"/>
  ...
</tc:bar>
<tc:bar markup="large, light">
  <tc:style customClass="bg-light"/>
  ...
</tc:bar>
<tc:bar markup="large, dark">
  <tc:style customClass="bg-danger"/>
  ...
</tc:bar>
<tc:bar markup="large, dark">
  <tc:style customClass="bg-primary"/>
  ...
</tc:bar>
<tc:bar markup="large, light">
  <tc:style customClass="bg-warning"/>
  ...
</tc:bar>

Expand Sizes

Examples for the different expand sizes.
Markup values are: small, medium, large, extraLarge

If no markup is set, the bar never collapse.

<tc:bar markup="light">
  ...
</tc:bar>
<tc:bar markup="small, light">
  ...
</tc:bar>
<tc:bar markup="medium, light">
  ...
</tc:bar>
<tc:bar markup="large, light">
  ...
</tc:bar>
<tc:bar markup="extraLarge, light">
  ...
</tc:bar>