@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/appLayout.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Application
-*Source:* https://uikit.developers.rio.cloud/#components/appLayout
-*Captured:* 2026-01-14T09:06:55.859Z
+*Source:* https://uikit.developers.rio.cloud/#/components/appLayout
+*Captured:* 2026-02-23T13:41:34.260Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -92,13 +92,13 @@ export default () => (
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="submodule " data-nav-item-key="3">
-                    <a href="#3">Navigation 3</a>
+                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                 </li>
             </ul>
             <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -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
@@ -284,13 +354,13 @@ const useResizer = () => {
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="//components/appLayout">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="submodule " data-nav-item-key="3">
-                    <a href="#3">Navigation 3</a>
+                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                 </li>
             </ul>
             <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -303,13 +373,13 @@ const useResizer = () => {
                 <div class="SubNavigation width-100pct overflow-auto">
                     <ul class="SubmoduleNavigation nav">
                         <li class="submodule" data-nav-item-key="1">
-                            <a aria-current="page" class="active" href="#components/appLayout">Subnavigation 1</a>
+                            <a aria-current="page" class="active" href="//components/appLayout">Subnavigation 1</a>
                         </li>
                         <li class="submodule" data-nav-item-key="2">
-                            <a href="#2">Subnavigation 2</a>
+                            <a class="" href="#/2" data-discover="true">Subnavigation 2</a>
                         </li>
                         <li class="submodule" data-nav-item-key="3">
-                            <a href="#3">Subnavigation 3</a>
+                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                         </li>
                     </ul>
                 </div>
@@ -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
@@ -432,13 +572,13 @@ export default () => (
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="submodule " data-nav-item-key="3">
-                    <a href="#3">Navigation 3</a>
+                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                 </li>
             </ul>
             <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -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
@@ -568,13 +778,13 @@ export default () => (
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="submodule " data-nav-item-key="3">
-                    <a href="#3">Navigation 3</a>
+                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                 </li>
             </ul>
             <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -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
@@ -724,13 +1004,13 @@ export default () => (
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="submodule " data-nav-item-key="3">
-                    <a href="#3">Navigation 3</a>
+                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                 </li>
             </ul>
             <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -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
+5
+4
+3
 
-Asset Group3
-Vehicle-3474Asset 1001
-Vehicle-4057Asset 1004
-Vehicle-7625Asset 1002
+Asset Group8
+Vehicle-2026Asset 1005
+Vehicle-2510Asset 1013
+Vehicle-3097Asset 1000
+Vehicle-4057Asset 1006
+Vehicle-5409Asset 1009
+Vehicle-6612Asset 1012
+Vehicle-8140Asset 1011
+Vehicle-8303Asset 1007
 
-Ungrouped2
+Ungrouped6
 
 200
 
@@ -850,17 +1205,22 @@ Navigation 3
 
 4
 
-1
-1
-1
 2
+5
+4
+3
 
-Asset Group3
-Vehicle-3474Asset 1001
-Vehicle-4057Asset 1004
-Vehicle-7625Asset 1002
+Asset Group8
+Vehicle-2026Asset 1005
+Vehicle-2510Asset 1013
+Vehicle-3097Asset 1000
+Vehicle-4057Asset 1006
+Vehicle-5409Asset 1009
+Vehicle-6612Asset 1012
+Vehicle-8140Asset 1011
+Vehicle-8303Asset 1007
 
-Ungrouped2
+Ungrouped6
 
 200
 
@@ -1241,10 +1601,10 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
             </ul>
             <ul class="SubmoduleNavigation nav">
                 <li class="submodule " data-nav-item-key="1">
-                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                 </li>
                 <li class="submodule " data-nav-item-key="2">
-                    <a href="#2">Navigation 2</a>
+                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                 </li>
                 <li class="CollapsedDropdown dropdown ">
                     <a id="basic-nav-dropdown" role="button" class="dropdown-toggle text-color-gray" aria-haspopup="true" aria-expanded="true">
@@ -1253,7 +1613,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                     </a>
                     <ul class="dropdown-menu" role="menu" aria-labelledby="basic-nav-dropdown">
                         <li class="submodule" data-nav-item-key="3">
-                            <a href="#3">Navigation 3</a>
+                            <a class="" href="#/3" data-discover="true">Navigation 3</a>
                         </li>
                     </ul>
                 </li>
@@ -1348,22 +1708,22 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <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>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</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-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">5</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">3</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1381,27 +1741,57 @@ 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>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
+                                            <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 class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2026</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1005</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-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3474</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1001</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2510</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1013</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-7b7fd85d970">
+                                                <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-3097</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1412,11 +1802,56 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Vehicle-4057</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1004</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1006</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-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-truck">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5409</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1009</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">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-truck">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6612</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
+                                                <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-8140</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1011</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
                                                 <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-8303</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1007</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">6</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
@@ -1557,13 +1992,13 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                 <div class="SubNavigation width-100pct overflow-auto">
                     <ul class="SubmoduleNavigation nav">
                         <li class="submodule" data-nav-item-key="1">
-                            <a aria-current="page" class="active" href="#components/appLayout">Subnavigation 1</a>
+                            <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Subnavigation 1</a>
                         </li>
                         <li class="submodule" data-nav-item-key="2">
-                            <a href="#2">Subnavigation 2</a>
+                            <a class="" href="#/2" data-discover="true">Subnavigation 2</a>
                         </li>
                         <li class="submodule" data-nav-item-key="3">
-                            <a href="#3">Subnavigation 3</a>
+                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                         </li>
                     </ul>
                 </div>
@@ -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. |