@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/appLayout.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/appLayout
-*Captured:* 2026-01-14T09:06:55.859Z
+*Captured:* 2026-02-03T14:04:07.567Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -136,6 +136,76 @@ export default () => (
 </div>
 ```
 
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
+
 ## SubNavigation example
 
 ### Example: Example 2
@@ -343,6 +413,76 @@ const useResizer = () => {
 </div>
 ```
 
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
+
 ## Body banner example
 
 ### Example: Example 3
@@ -477,6 +617,76 @@ export default () => (
 </div>
 ```
 
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
+
 ## Bottom bar example
 
 ### Example: Example 4
@@ -615,6 +825,76 @@ export default () => (
 </div>
 ```
 
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
+
 ## Sidebar Example
 
 ### Example: Example 5
@@ -793,6 +1073,76 @@ export default () => (
 </div>
 ```
 
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
+
 ## Complete example with all components
 
 ### Example: Example 6
@@ -805,17 +1155,22 @@ Navigation 3
 
 4
 
-1
-1
-1
-2
+6
+3
+4
+6
 
-Asset Group3
-Vehicle-3474Asset 1001
-Vehicle-4057Asset 1004
-Vehicle-7625Asset 1002
+Asset Group8
+Vehicle-1458Asset 1001
+Vehicle-2546Asset 1016
+Vehicle-3976Asset 1010
+Vehicle-4094Asset 1009
+Vehicle-5226Asset 1013
+Vehicle-5265Asset 1012
+Vehicle-5337Asset 1005
+Vehicle-6602Asset 1018
 
-Ungrouped2
+Ungrouped11
 
 200
 
@@ -850,17 +1205,22 @@ Navigation 3
 
 4
 
-1
-1
-1
-2
+6
+3
+4
+6
 
-Asset Group3
-Vehicle-3474Asset 1001
-Vehicle-4057Asset 1004
-Vehicle-7625Asset 1002
+Asset Group8
+Vehicle-1458Asset 1001
+Vehicle-2546Asset 1016
+Vehicle-3976Asset 1010
+Vehicle-4094Asset 1009
+Vehicle-5226Asset 1013
+Vehicle-5265Asset 1012
+Vehicle-5337Asset 1005
+Vehicle-6602Asset 1018
 
-Ungrouped2
+Ungrouped11
 
 200
 
@@ -1346,24 +1706,24 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                             <div class="display-flex justify-content-between align-items-start width-100pct">
                                                 <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1381,7 +1741,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Asset Group</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
@@ -1393,15 +1753,75 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-van">
+                                                    <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3474</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-1458</span>
                                                         <span class="TreeLabelNameTextSubline">Asset 1001</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-trailer">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2546</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1016</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3976</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-4094</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5226</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1013</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1411,12 +1831,27 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-4057</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1004</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5265</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-van">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5337</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9718">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1426,8 +1861,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7625</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6602</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1018</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1443,7 +1878,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
@@ -1611,4 +2046,74 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
         <button type="button" class="btn btn-primary">Bottom Button</button>
     </div>
 </div>
-```
+```
+
+#### Props: ApplicationLayout
+
+### ApplicationLayout
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutHeader
+
+### ApplicationLayoutHeader
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutSidebar
+
+### ApplicationLayoutSidebar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+
+#### Props: ApplicationLayoutBody
+
+### ApplicationLayoutBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
+
+#### Props: ApplicationLayoutBodyNavigation
+
+### ApplicationLayoutBodyNavigation
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
+
+#### Props: ApplicationLayoutBodyBottomBar
+
+### ApplicationLayoutBodyBottomBar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
+
+#### Props: ApplicationLayoutBodyBanner
+
+### ApplicationLayoutBodyBanner
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |