[DOCS] New grouped navigation side menu (#2088)

* Add to Advanced Settings

Also slight reorder to better match UI

* Add new nested topic, images

* Corrects name of advanced setting

* Apply suggestions from code review

Co-authored-by: benironside <91905639+benironside@users.noreply.github.com>

* Update docs/getting-started/advanced-setting.asciidoc

* Crop image

* Update docs/getting-started/grouped-nav-ui.asciidoc

* Apply suggestions from Janeen's review

Co-authored-by: Janeen Mikell-Straughn <57149392+jmikell821@users.noreply.github.com>

Co-authored-by: benironside <91905639+benironside@users.noreply.github.com>
Co-authored-by: Janeen Mikell-Straughn <57149392+jmikell821@users.noreply.github.com>

Author: 3 people

docs/getting-started/advanced-setting.asciidoc

@@ -4,10 +4,11 @@
 The advanced settings determine:
 
 * Which indices {es-sec} uses to retrieve data
+* {ml-cap} anomaly score display threshold
+* The navigation menu style used throughout the {security-app}
 * Whether the news feed is displayed on the <<overview-ui>>
 * The default time interval used to filter {es-sec} pages
 * The default {es-sec} pages refresh time
-* {ml-cap} anomaly score display threshold
 * Which IP reputation links appear on <<network-page-overview, IP detail>>
 pages
 * Whether cross-cluster search (CCS) privilege warnings are displayed
@@ -84,6 +85,21 @@ Kibana transmits certain information about Elastic Security when users interact
 
 To learn more, refer to our https://www.elastic.co/legal/privacy-statement[Privacy Statement].
 
+[discrete]
+== Set machine learning score threshold
+
+When security <<machine-learning, {ml} jobs>> are enabled, this setting
+determines the threshold above which anomaly scores appear in {es-sec}:
+
+* `securitySolution:defaultAnomalyScore`
+
+[discrete]
+== Enable grouped navigation
+
+The `securitySolution:enableGroupedNav` setting enables the grouped navigation menu for {elastic-sec}, which groups related pages and highlights commonly visited areas for a streamlined experience.
+
+By default, the {security-app} uses the legacy navigation menu; turn on `securitySolution:enableGroupedNav` to use the grouped navigation menu.
+
 [discrete]
 == Modify news feed settings
 
@@ -108,14 +124,6 @@ NOTE: Refer to {ref}/common-options.html[Date Math] for information about the
 syntax. The UI {kibana-ref}/set-time-filter.html[time filter] overrides the
 default values.
 
-[discrete]
-== Set machine learning score threshold
-
-When security <<machine-learning, {ml} jobs>> are enabled, this setting
-determines the threshold above which anomaly scores are displayed in {es-sec}:
-
-* `securitySolution:defaultAnomalyScore`
-
 [discrete]
 [[ip-reputation-links]]
 == Display reputation links on IP detail pages

docs/getting-started/grouped-nav-ui.asciidoc

@@ -0,0 +1,19 @@
+[[grouped-nav-ui]]
+= Grouped navigation menu
+
+{elastic-sec}'s grouped navigation menu groups related pages and highlights commonly visited areas for a streamlined experience. 
+
+NOTE: By default, the {security-app} uses the legacy navigation menu. To enable grouped navigation, go to *{kib}* -> *{stack-manage-app}* -> *Advanced Settings*, then turn on `securitySolution:enableGroupedNav`.
+
+[role="screenshot"]
+image::images/grouped-nav-ui.png[width=75%][height=75%][Overview of grouped navigation UI]
+
+The side navigation menu contains direct links and expandable groups, identified by the group icon (image:images/group-icon.png[Group icon,16,16]).
+
+* Click top-level links to go directly to pages that are essential for detection and investigation workflows (*Alerts*, *Timelines*, and *Cases*).
+
+* Click a group's name to go to its landing page, with links and information for related pages.
+
+* Click a group's icon (image:images/group-icon.png[Group icon,16,15]) to open its flyout menu. This displays the same links and information as the landing page, but without navigating away from the current page.
+
+* Use the *Manage* group to configure {elastic-sec} for various use cases, such as SIEM and endpoint management.

docs/getting-started/images/group-icon.png

@@ -1,5 +1,4 @@
 [[es-ui-overview]]
-[chapter,role="xpack"]
 = Elastic Security UI
 
 The {security-app} is a highly interactive workspace designed for security analysts that provides a clear overview of events and alerts from your environment. You can use the interactive UI to drill down into areas of interest.
@@ -270,3 +269,5 @@ image::images/timeline-accessiblity-shifting-keyboard-focus.gif[width=100%][heig
 
 [role="screenshot"]
 image::images/timeline-accessiblity-page-up-n-down.gif[width=100%][height=100%][Demo that shows how to to scroll through the page]
+
+include::grouped-nav-ui.asciidoc[leveloffset=+1]