fun RenderContext.appFrame(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "app", build: AppFrameComponent.() -> Unit = {})

This component implements a standard responsive layout for web-apps.

It offers the following sections

  • sidebar with brand, nav section and optional footer on the left

  • header at the top with actions section on the right

  • main section

  • optional navigation tabs at the bottom of main section

The sidebar is moved off-screen on small screens and can be opened by a hamburger-button, that appears at the left edge of the header.

The component is responsible for rendering all these section at the right sizes and places at different viewport-sizes and on different devices.

You can adopt the appearance of all sections by adjusting the Theme.



optional CSS class that should be applied to the element


a lambda expression for setting up the component itself.


the ID of the element


the prefix for the generated CSS class resulting in the form `$prefix-$hash`


a lambda expression for declaring the styling as fritz2's styling DSL