diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
index 2b15b72a9b..7ee294bcea 100644
--- a/docs/navigation-advanced.md
+++ b/docs/navigation-advanced.md
@@ -35,13 +35,79 @@ Imagine your application hosts two micro frontend views: `http://example.com/a#e
 
 Nodes belonging to the same view group are always rendered in their own view group iframe. Nodes not belonging to any view group follow the same-origin iframe rendering policy.
 
+<!-- add-attribute:class:warning -->
+>**NOTE**: To make sure view groups work properly, you need to include **Luigi Client** in your micro frontend. See [this document](luigi-client-setup.md) for instructions, or for a simpler implementation include this line in your application:
+`<script src="https://unpkg.com/@luigi-project/client/luigi-client.js"></script>`
+
+You can paste this view group example in [Luigi Fiddle](https://fiddle.luigi-project.io/):
+
+<!-- accordion:start -->
+
+### Code example
+
+```javascript
+Luigi.setConfig({
+            navigation: {
+                preloadViewGroups: true,
+                viewGroupSettings: {
+                    vg1: {
+                        preloadUrl: '/examples/microfrontends/multipurpose.html#/preload'
+                    }
+                },
+                nodes: () => [
+                    {
+                        pathSegment: 'settings',
+                        label: 'Settings',
+                        defaultChildNode: 'agents',
+                        children: [
+                            {
+                                viewGroup: 'vg1',
+                                pathSegment: 'agents',
+                                label: 'Agent Lists',
+                                hideSideNav: false,
+                                loadingIndicator: {
+                                    hideAutomatically: true,
+                                    enabled: true
+                                },
+                                viewUrl: '/examples/microfrontends/multipurpose.html#/route1',
+                            },
+                            {
+                                viewGroup: 'vg1',
+                                pathSegment: 'agentgroups',
+                                label: 'Agent Groups',
+                                hideSideNav: false,
+                                loadingIndicator: {
+                                    hideAutomatically: true,
+                                    enabled: true
+                                },
+                                viewUrl: '/#route1/examples/microfrontends/multipurpose.html#/route2',
+                            },
+                        ]
+                    }
+                ],
+                profile: {
+                    logout: {
+                        label: 'Sign Out',
+                        icon: "sys-cancel",
+                        customLogoutFn: () => { }
+                    },
+                }
+            },
+            routing: {
+                useHashRouting: true
+            }
+        });
+```
+
+<!-- accordion:end -->
+
 The view groups feature also offers out-of-the-box caching. Each time you navigate to another view group, either a new iframe is created or it is reused if already exists. In both cases, the iframe you are navigating from becomes hidden and is available for you to use again. If you navigate back to the first iframe and it should be updated with new data, such when a new entry was added in the second iframe and you want to display it in a table in the first iframe, you must define a **preloadUrl** parameter for the view group under **navigation.viewGroupSettings**.
 
 You can also preload view groups. You just need to define which URL you want to preload, and Luigi will preload the view after some user interactions when the browser is most likely to be idle. This option is active by default, but you can deactivate it with the [**preloadViewGroups**](navigation-parameters-reference.md#preloadviewgroups) configuration flag.
 
 For more information on setting caching with view refreshing and preloading for view groups, read [this document](navigation-parameters-reference.md#node-parameters).
 
-Further options related to view groups can be configured using the parameters listed here. These parameters should be placed just before `nodes:` in the `navigation:` section of the configuration file:
+Further options related to view groups can be configured using the parameters listed below. These parameters should be placed just before `nodes:` in the `navigation:` section of the configuration file:
 
 ### viewGroupSettings
 - **type**: object