Update docs

vizro-core/docs/pages/tutorials/explore_components.md

@@ -710,8 +710,8 @@ and how to bring them together.
 For future dashboard creations, you can explore more about the available dashboard `components` by going through the
 [user guide](../user_guides/components.md). To gain more in-depth knowledge about the usage and configuration
 details of `controls`, check out the user guides dedicated to [Filters](../user_guides/filters.md), [Parameters](../user_guides/parameters.md)
-and [Selectors](../user_guides/selectors.md). This guide will provide you with valuable insights on utilizing and
-customizing controls for interactive functionality in your dashboards.
+and [Selectors](../user_guides/selectors.md). If you'd like to understand more about different ways to configure the navigation of your dashboard, head 
+to [Navigation](../user_guides/navigation.md).
 
 Vizro doesn't end here, and we only covered the key features, but there is still much more to explore! You can learn:
 

vizro-core/docs/pages/user_guides/components.md

@@ -400,6 +400,13 @@ and provide an attribute selector to select images with that matching URL hash.
 
 ### Creating navigation
 
+!!! note
+
+    This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation 
+    card. To configure the navigation panel on the left hand side of the screen, refer to the 
+    [guide on navigation](navigation.md).
+
+
 A navigation card allows you to navigate to a different page via a click on the card area.
 To create a navigation card, do the following:
 

vizro-core/docs/pages/user_guides/navigation.md

@@ -56,7 +56,7 @@ By default, if the `navigation` argument is not specified, Vizro creates a navig
             title: My first page
           - components:
              - text: My text here
-               type: graph
+               type: card
             title: My second page
           - components:
               - figure:
@@ -166,7 +166,7 @@ Another way to group together pages in the navigation is to use a [`NavBar`][viz
             Group B:
               - My third page
           nav_selector:
-            type: nav_bawr
+            type: nav_bar
         ```
     === "Result"
         [![NavBar]][NavBar]
@@ -211,7 +211,7 @@ The same configuration for [grouping pages](#grouping-your-pages) applies inside
         # pages defined as in default example
         navigation:
           nav_selector:
-            type: nav_bawr
+            type: nav_bar
             items:
               - label: Section 1 
                 pages:
@@ -256,7 +256,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M
         # pages defined as in default example
         navigation:
           nav_selector:
-            type: nav_bawr
+            type: nav_bar
             items:
               - label: Section 1 
                 icon: bar_chart