diff --git a/docs/assets/app-switcher.jpg b/docs/assets/app-switcher.jpg
new file mode 100644
index 0000000000..e7bd7266e5
Binary files /dev/null and b/docs/assets/app-switcher.jpg differ
diff --git a/docs/assets/app-switcher.png b/docs/assets/app-switcher.png
deleted file mode 100644
index 5cea2436ff..0000000000
Binary files a/docs/assets/app-switcher.png and /dev/null differ
diff --git a/docs/assets/context-switcher.jpg b/docs/assets/context-switcher.jpg
new file mode 100644
index 0000000000..3cabda20f7
Binary files /dev/null and b/docs/assets/context-switcher.jpg differ
diff --git a/docs/assets/context-switcher.png b/docs/assets/context-switcher.png
deleted file mode 100644
index d562357577..0000000000
Binary files a/docs/assets/context-switcher.png and /dev/null differ
diff --git a/docs/assets/navigation-structure.jpg b/docs/assets/navigation-structure.jpg
new file mode 100644
index 0000000000..da1b9f4db4
Binary files /dev/null and b/docs/assets/navigation-structure.jpg differ
diff --git a/docs/assets/navigation-structure.png b/docs/assets/navigation-structure.png
deleted file mode 100644
index 0ca0f86b20..0000000000
Binary files a/docs/assets/navigation-structure.png and /dev/null differ
diff --git a/docs/assets/product-switcher.jpg b/docs/assets/product-switcher.jpg
new file mode 100644
index 0000000000..c7d74ad209
Binary files /dev/null and b/docs/assets/product-switcher.jpg differ
diff --git a/docs/assets/product-switcher.png b/docs/assets/product-switcher.png
deleted file mode 100644
index 016eca70d1..0000000000
Binary files a/docs/assets/product-switcher.png and /dev/null differ
diff --git a/docs/assets/profile.jpg b/docs/assets/profile.jpg
new file mode 100644
index 0000000000..e9a9852409
Binary files /dev/null and b/docs/assets/profile.jpg differ
diff --git a/docs/assets/profile.png b/docs/assets/profile.png
deleted file mode 100644
index 01a1c4dab6..0000000000
Binary files a/docs/assets/profile.png and /dev/null differ
diff --git a/docs/assets/tabnav.jpg b/docs/assets/tabnav.jpg
new file mode 100644
index 0000000000..c4200bf4e3
Binary files /dev/null and b/docs/assets/tabnav.jpg differ
diff --git a/docs/assets/tabnav.png b/docs/assets/tabnav.png
deleted file mode 100644
index e808b44aa2..0000000000
Binary files a/docs/assets/tabnav.png and /dev/null differ
diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
index 5a7ad5ab8e..a81153e19a 100644
--- a/docs/navigation-advanced.md
+++ b/docs/navigation-advanced.md
@@ -219,7 +219,7 @@ The purpose of contexts is to send objects to the micro frontend. You can do thi
## Profile
-
+
The profile is a drop-down list in the top navigation that allows you to override the logout item content if authorization is already configured. You can also add links to Luigi navigation nodes.
@@ -240,7 +240,7 @@ profile: {
## Context switcher
-
+
The context switcher is a drop-down element in the top navigation. It allows you to switch between a curated list of navigation elements such as Environments. To do so, add the **contextSwitcher** property to the navigation object. Find all the parameters you can use to configure it [here](navigation-parameters-reference.md#context-switcher).
@@ -273,7 +273,7 @@ contextSwitcher: {
## Product switcher
-
+
The product switcher is window in top the navigation which allows you to switch between navigation elements displayed there. To add it to your application, include the **productSwitcher** property in your **navigation** object. You may also add any of the parameters listed [here](navigation-parameters-reference.md#product-switcher).
@@ -305,7 +305,7 @@ productSwitcher: {
## App switcher
-
+
The app switcher is a drop-down in top the navigation which allows you to switch between applications. To use it, add the **appSwitcher** property in your **navigation** object. You may also add any of the parameters listed [here](navigation-parameters-reference.md#app-switcher).
@@ -331,7 +331,7 @@ appSwitcher = {
## Tab navigation
-
+
Tab-style navigation in Luigi can be displayed directly above the micro frontend area, providing you with additional menu options. When you put tab navigation nodes into a [category](navigation-configuration.md#category), they will be rendered in a drop-down. Add this parameter to your configuration to create tab navigation nodes:
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index 675c8fc8c5..173058928c 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -34,7 +34,7 @@ There are three main elements to Luigi:
3. Main content window which renders the micro frontend.
-
+
## First steps