`<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.

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/03-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>

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/03-intro/Intro.xhtml"/> </f:facet> <div class="ml-auto"> // centered content </div> <f:facet name="after"> // right side content </f:facet> </tc:bar>

An example of a dropdown menu with radio entries.

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>

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>