A offcanvas is created with `<tc:offcanvas/>`. It's based one the concept.

Tag Library Documentation: |

<tc:button label="Open offcanvas"> <tc:operation for="ajaxOffcanvas" name="show"/> <f:ajax execute="ajaxOffcanvas" render="ajaxOffcanvas"/> </tc:button> <tc:offcanvas id="ajaxOffcanvas"> <f:facet name="label">Server side (Ajax)</f:facet> <f:facet name="bar"> <tc:link icon="bi-x-lg"> <tc:operation name="hide" for="ajaxOffcanvas"/> <f:ajax execute="ajaxOffcanvas" render="ajaxOffcanvas"/> </tc:link> </f:facet> Content of the server side offcanvas. </tc:offcanvas> Server side (Ajax) Content of the server side offcanvas. <tc:button label="Open offcanvas" omit="true"> <tc:operation for="clientOffcanvas" name="show"/> </tc:button> <tc:offcanvas id="clientOffcanvas" collapsedMode="hidden"> <f:facet name="label">Client side</f:facet> <f:facet name="bar"> <tc:link icon="bi-x-lg" omit="true"> <tc:operation name="hide" for="clientOffcanvas"/> </tc:link> </f:facet> Content of the client side offcanvas. </tc:offcanvas> Client side Content of the client side offcanvas.

Use the `placement` attribute to set the position of the offcanvas. Possible values are `top`, `left`, `right` and `bottom`.

Content of the top offcanvas.

Content of the left offcanvas.

Content of the right offcanvas.

Content of the bottom offcanvas.

A JavaScript custom event is fired if a `<tc:offcanvas/>` is collapsed or expanded.

`tobago.offcanvas.show` is fired before the box is expanded.

`tobago.offcanvas.shown` is fired after the box is expanded. (Does not wait for a possible Ajax reload.)

`tobago.offcanvas.hide` is fired before the box is collaped.

`tobago.offcanvas.hidden` is fired after the box is collapsed. (Does not wait for a possible Ajax reload.)