Fix spacing in Notification Templates tab (legacy mode)

Add proper top margin to TabContent in legacy mode to match the
spacing pattern used in Notification Policies page.

Changes:
- Import css from @emotion/css and useStyles2
- Import GrafanaTheme2 for theme typing
- Create getStyles function with tabContent margin
- Apply className to TabContent in legacy mode rendering
- Matches the pattern used in NotificationPoliciesPage.tsx

This fixes the visual issue where the "Create notification templates"
text was directly touching the tabs above with no spacing in legacy
navigation mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -547,6 +547,11 @@ export interface FeatureToggles {
   */
   alertingCentralAlertHistory?: boolean;
   /**
+  * Enable new grouped navigation structure for Alerting
+  * @default false
+  */
+  alertingNavigationV2?: boolean;
+  /**
   * Preserve plugin proxy trailing slash.
   * @default false
   */

pkg/services/featuremgmt/registry.go

@@ -907,6 +907,14 @@ var (
 			Owner:        grafanaAlertingSquad,
 			FrontendOnly: false, // changes navtree from backend
 		},
+		{
+			Name:         "alertingNavigationV2",
+			Description:  "Enable new grouped navigation structure for Alerting",
+			Stage:        FeatureStageExperimental,
+			Owner:        grafanaAlertingSquad,
+			FrontendOnly: false,   // changes navtree from backend
+			Expression:   "false", // Off by default
+		},
 		{
 			Name:        "pluginProxyPreserveTrailingSlash",
 			Description: "Preserve plugin proxy trailing slash.",

pkg/services/featuremgmt/toggles_gen.csv

@@ -125,6 +125,7 @@ alertingSavedSearches,experimental,@grafana/alerting-squad,false,false,true
 alertingDisableSendAlertsExternal,experimental,@grafana/alerting-squad,false,false,false
 preserveDashboardStateWhenNavigating,experimental,@grafana/dashboards-squad,false,false,false
 alertingCentralAlertHistory,experimental,@grafana/alerting-squad,false,false,false
+alertingNavigationV2,experimental,@grafana/alerting-squad,false,false,false
 pluginProxyPreserveTrailingSlash,GA,@grafana/plugins-platform-backend,false,false,false
 azureMonitorPrometheusExemplars,GA,@grafana/partner-datasources,false,false,false
 authZGRPCServer,experimental,@grafana/identity-access-team,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -379,6 +379,10 @@ const (
 	// Enables the new central alert history.
 	FlagAlertingCentralAlertHistory = "alertingCentralAlertHistory"
 
+	// FlagAlertingNavigationV2
+	// Enable new grouped navigation structure for Alerting
+	FlagAlertingNavigationV2 = "alertingNavigationV2"
+
 	// FlagPluginProxyPreserveTrailingSlash
 	// Preserve plugin proxy trailing slash.
 	FlagPluginProxyPreserveTrailingSlash = "pluginProxyPreserveTrailingSlash"

pkg/services/featuremgmt/toggles_gen.json

@@ -348,6 +348,19 @@
         "expression": "true"
       }
     },
+    {
+      "metadata": {
+        "name": "alertingNavigationV2",
+        "resourceVersion": "1767827323622",
+        "creationTimestamp": "2026-01-07T23:08:43Z"
+      },
+      "spec": {
+        "description": "Enable new grouped navigation structure for Alerting",
+        "stage": "experimental",
+        "codeowner": "@grafana/alerting-squad",
+        "expression": "false"
+      }
+    },
     {
       "metadata": {
         "name": "alertingNotificationHistory",

pkg/services/navtree/navtreeimpl/navtree.go

@@ -433,6 +433,214 @@ func (s *ServiceImpl) buildDashboardNavLinks(c *contextmodel.ReqContext) []*navt
 }
 
 func (s *ServiceImpl) buildAlertNavLinks(c *contextmodel.ReqContext) *navtree.NavLink {
+	//nolint:staticcheck // not yet migrated to OpenFeature
+	if !s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingNavigationV2) {
+		return s.buildAlertNavLinksLegacy(c)
+	}
+
+	// V2 Navigation - New grouped structure
+	hasAccess := ac.HasAccess(s.accessControl, c)
+	var alertChildNavs []*navtree.NavLink
+
+	// 1. Alert activity (parent with tabs: Alerts, Active notifications)
+	//nolint:staticcheck // not yet migrated to OpenFeature
+	var alertActivityChildren []*navtree.NavLink
+	if s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingTriage) {
+		// Alerts tab
+		if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead), ac.EvalPermission(ac.ActionAlertingRuleExternalRead))) {
+			alertActivityChildren = append(alertActivityChildren, &navtree.NavLink{
+				Text: "Alerts", SubTitle: "Visualize active and pending alerts", Id: "alert-activity-alerts", Url: s.cfg.AppSubURL + "/alerting/alerts", Icon: "bell",
+			})
+		}
+		// Active notifications tab
+		if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingInstanceRead), ac.EvalPermission(ac.ActionAlertingInstancesExternalRead))) {
+			alertActivityChildren = append(alertActivityChildren, &navtree.NavLink{
+				Text: "Active notifications", SubTitle: "See grouped alerts with active notifications", Id: "alert-activity-groups", Url: s.cfg.AppSubURL + "/alerting/groups", Icon: "layer-group",
+			})
+		}
+		if len(alertActivityChildren) > 0 {
+			alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+				Text:     "Alert activity",
+				SubTitle: "Visualize active and pending alerts",
+				Id:       "alert-activity",
+				Url:      s.cfg.AppSubURL + "/alerting/alerts",
+				Icon:     "bell",
+				IsNew:    true,
+				Children: alertActivityChildren,
+			})
+		}
+	}
+
+	// 2. Alert rules (parent with tabs: Alert rules, Recently deleted)
+	var alertRulesChildren []*navtree.NavLink
+	if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead), ac.EvalPermission(ac.ActionAlertingRuleExternalRead))) {
+		alertRulesChildren = append(alertRulesChildren, &navtree.NavLink{
+			Text: "Alert rules", SubTitle: "Rules that determine whether an alert will fire", Id: "alert-rules-list", Url: s.cfg.AppSubURL + "/alerting/list", Icon: "list-ul",
+		})
+	}
+	//nolint:staticcheck // not yet migrated to OpenFeature
+	if c.GetOrgRole() == org.RoleAdmin && s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertRuleRestore) && s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingRuleRecoverDeleted) {
+		alertRulesChildren = append(alertRulesChildren, &navtree.NavLink{
+			Text:     "Recently deleted",
+			SubTitle: "Any items listed here for more than 30 days will be automatically deleted.",
+			Id:       "alert-rules-recently-deleted",
+			Url:      s.cfg.AppSubURL + "/alerting/recently-deleted",
+		})
+	}
+	if len(alertRulesChildren) > 0 {
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+			Text:     "Alert rules",
+			SubTitle: "Manage alert and recording rules",
+			Id:       "alert-rules",
+			Url:      s.cfg.AppSubURL + "/alerting/list",
+			Icon:     "list-ul",
+			Children: alertRulesChildren,
+		})
+	}
+
+	// 3. Notification configuration (parent with tabs: Contact points, Notification policies, Templates, Time intervals)
+	var notificationConfigChildren []*navtree.NavLink
+
+	contactPointsPerms := []ac.Evaluator{
+		ac.EvalPermission(ac.ActionAlertingNotificationsRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsExternalRead),
+		ac.EvalPermission(ac.ActionAlertingReceiversRead),
+		ac.EvalPermission(ac.ActionAlertingReceiversReadSecrets),
+		ac.EvalPermission(ac.ActionAlertingReceiversCreate),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTemplatesRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTemplatesWrite),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTemplatesDelete),
+	}
+
+	if hasAccess(ac.EvalAny(contactPointsPerms...)) {
+		notificationConfigChildren = append(notificationConfigChildren, &navtree.NavLink{
+			Text: "Contact points", SubTitle: "Choose how to notify your contact points when an alert instance fires", Id: "notification-config-contact-points", Url: s.cfg.AppSubURL + "/alerting/notifications", Icon: "comment-alt-share",
+		})
+	}
+
+	if hasAccess(ac.EvalAny(
+		ac.EvalPermission(ac.ActionAlertingNotificationsRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsExternalRead),
+		ac.EvalPermission(ac.ActionAlertingRoutesRead),
+		ac.EvalPermission(ac.ActionAlertingRoutesWrite),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTimeIntervalsRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTimeIntervalsWrite),
+	)) {
+		notificationConfigChildren = append(notificationConfigChildren, &navtree.NavLink{
+			Text: "Notification policies", SubTitle: "Determine how alerts are routed to contact points", Id: "notification-config-policies", Url: s.cfg.AppSubURL + "/alerting/routes", Icon: "sitemap",
+		})
+	}
+
+	// Templates
+	if hasAccess(ac.EvalAny(contactPointsPerms...)) {
+		notificationConfigChildren = append(notificationConfigChildren, &navtree.NavLink{
+			Text: "Notification templates", SubTitle: "Manage notification templates", Id: "notification-config-templates", Url: s.cfg.AppSubURL + "/alerting/notifications/templates", Icon: "file-alt",
+		})
+	}
+
+	// Time intervals
+	if hasAccess(ac.EvalAny(
+		ac.EvalPermission(ac.ActionAlertingNotificationsRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsExternalRead),
+		ac.EvalPermission(ac.ActionAlertingRoutesRead),
+		ac.EvalPermission(ac.ActionAlertingRoutesWrite),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTimeIntervalsRead),
+		ac.EvalPermission(ac.ActionAlertingNotificationsTimeIntervalsWrite),
+	)) {
+		notificationConfigChildren = append(notificationConfigChildren, &navtree.NavLink{
+			Text: "Time intervals", SubTitle: "Configure time intervals for notification policies", Id: "notification-config-time-intervals", Url: s.cfg.AppSubURL + "/alerting/routes?tab=time_intervals", Icon: "clock-nine",
+		})
+	}
+
+	if len(notificationConfigChildren) > 0 {
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+			Text:     "Notification configuration",
+			SubTitle: "Configure how alerts are notified",
+			Id:       "notification-config",
+			Url:      s.cfg.AppSubURL + "/alerting/notifications",
+			Icon:     "cog",
+			Children: notificationConfigChildren,
+		})
+	}
+
+	// 4. Insights (parent with tabs: System Insights, Alert state history)
+	var insightsChildren []*navtree.NavLink
+
+	// System Insights
+	if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead), ac.EvalPermission(ac.ActionAlertingRuleExternalRead))) {
+		insightsChildren = append(insightsChildren, &navtree.NavLink{
+			Text: "System Insights", SubTitle: "View system insights and analytics", Id: "insights-system", Url: s.cfg.AppSubURL + "/alerting/insights", Icon: "chart-line",
+		})
+	}
+
+	// Alert state history
+	//nolint:staticcheck // not yet migrated to OpenFeature
+	if s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingCentralAlertHistory) {
+		if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead))) {
+			insightsChildren = append(insightsChildren, &navtree.NavLink{
+				Text:     "Alert state history",
+				SubTitle: "View a history of all alert events generated by your Grafana-managed alert rules. All alert events are displayed regardless of whether silences or mute timings are set.",
+				Id:       "insights-history",
+				Url:      s.cfg.AppSubURL + "/alerting/history",
+				Icon:     "history",
+			})
+		}
+	}
+
+	if len(insightsChildren) > 0 {
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+			Text:     "Insights",
+			SubTitle: "Analytics and history for alerting",
+			Id:       "insights",
+			Url:      s.cfg.AppSubURL + "/alerting/insights",
+			Icon:     "chart-line",
+			Children: insightsChildren,
+		})
+	}
+
+	// 5. Settings (parent with tab: Settings)
+	if c.GetOrgRole() == org.RoleAdmin {
+		settingsChildren := []*navtree.NavLink{
+			{
+				Text: "Settings", Id: "alerting-admin", Url: s.cfg.AppSubURL + "/alerting/admin", Icon: "cog",
+			},
+		}
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+			Text:     "Settings",
+			SubTitle: "Alerting configuration and administration",
+			Id:       "alerting-settings",
+			Url:      s.cfg.AppSubURL + "/alerting/admin",
+			Icon:     "cog",
+			Children: settingsChildren,
+		})
+	}
+
+	// Create alert rule (hidden from tabs)
+	if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleCreate), ac.EvalPermission(ac.ActionAlertingRuleExternalWrite))) {
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+			Text: "Create alert rule", SubTitle: "Create an alert rule", Id: "alert",
+			Icon: "plus", Url: s.cfg.AppSubURL + "/alerting/new", HideFromTabs: true, IsCreateAction: true,
+		})
+	}
+
+	if len(alertChildNavs) > 0 {
+		var alertNav = navtree.NavLink{
+			Text:       "Alerting",
+			SubTitle:   "Learn about problems in your systems moments after they occur",
+			Id:         navtree.NavIDAlerting,
+			Icon:       "bell",
+			Children:   alertChildNavs,
+			SortWeight: navtree.WeightAlerting,
+			Url:        s.cfg.AppSubURL + "/alerting",
+		}
+
+		return &alertNav
+	}
+
+	return nil
+}
+
+func (s *ServiceImpl) buildAlertNavLinksLegacy(c *contextmodel.ReqContext) *navtree.NavLink {
 	hasAccess := ac.HasAccess(s.accessControl, c)
 	var alertChildNavs []*navtree.NavLink
 
@@ -440,7 +648,7 @@ func (s *ServiceImpl) buildAlertNavLinks(c *contextmodel.ReqContext) *navtree.Na
 	if s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingTriage) {
 		if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead), ac.EvalPermission(ac.ActionAlertingRuleExternalRead))) {
 			alertChildNavs = append(alertChildNavs, &navtree.NavLink{
-				Text: "Alerts", SubTitle: "Visualize active and pending alerts", Id: "alert-alerts", Url: s.cfg.AppSubURL + "/alerting/alerts", Icon: "bell", IsNew: true,
+				Text: "Alert activity", SubTitle: "Visualize active and pending alerts", Id: "alert-alerts", Url: s.cfg.AppSubURL + "/alerting/alerts", Icon: "bell", IsNew: true,
 			})
 		}
 	}

pkg/services/navtree/navtreeimpl/navtree_alerting_test.go

@@ -0,0 +1,234 @@
+package navtreeimpl
+
+import (
+	"net/http"
+	"testing"
+
+	"github.com/stretchr/testify/require"
+
+	"github.com/grafana/grafana/pkg/infra/log"
+	ac "github.com/grafana/grafana/pkg/services/accesscontrol"
+	accesscontrolmock "github.com/grafana/grafana/pkg/services/accesscontrol/mock"
+	contextmodel "github.com/grafana/grafana/pkg/services/contexthandler/model"
+	"github.com/grafana/grafana/pkg/services/featuremgmt"
+	"github.com/grafana/grafana/pkg/services/navtree"
+	"github.com/grafana/grafana/pkg/services/org"
+	"github.com/grafana/grafana/pkg/services/user"
+	"github.com/grafana/grafana/pkg/setting"
+	"github.com/grafana/grafana/pkg/web"
+)
+
+// Test fixtures
+func setupTestContext() *contextmodel.ReqContext {
+	httpReq, _ := http.NewRequest(http.MethodGet, "", nil)
+	return &contextmodel.ReqContext{
+		SignedInUser: &user.SignedInUser{
+			UserID:  1,
+			OrgID:   1,
+			OrgRole: org.RoleAdmin,
+		},
+		Context: &web.Context{Req: httpReq},
+	}
+}
+
+func setupTestService(permissions []ac.Permission, featureFlags ...string) ServiceImpl {
+	// Convert string slice to []any for WithFeatures
+	flags := make([]any, len(featureFlags))
+	for i, flag := range featureFlags {
+		flags[i] = flag
+	}
+	return ServiceImpl{
+		log:           log.New("navtree"),
+		cfg:           setting.NewCfg(),
+		accessControl: accesscontrolmock.New().WithPermissions(permissions),
+		features:      featuremgmt.WithFeatures(flags...),
+	}
+}
+
+func fullPermissions() []ac.Permission {
+	return []ac.Permission{
+		{Action: ac.ActionAlertingRuleRead, Scope: "*"},
+		{Action: ac.ActionAlertingNotificationsRead, Scope: "*"},
+		{Action: ac.ActionAlertingRoutesRead, Scope: "*"},
+		{Action: ac.ActionAlertingInstanceRead, Scope: "*"},
+	}
+}
+
+// Helper to find a nav link by ID
+func findNavLink(navLink *navtree.NavLink, id string) *navtree.NavLink {
+	if navLink == nil {
+		return nil
+	}
+	if navLink.Id == id {
+		return navLink
+	}
+	for _, child := range navLink.Children {
+		if found := findNavLink(child, id); found != nil {
+			return found
+		}
+	}
+	return nil
+}
+
+// Helper to check if a nav link has a child with given ID
+func hasChildWithId(parent *navtree.NavLink, childId string) bool {
+	if parent == nil {
+		return false
+	}
+	for _, child := range parent.Children {
+		if child.Id == childId {
+			return true
+		}
+	}
+	return false
+}
+
+func TestBuildAlertNavLinks_FeatureToggle(t *testing.T) {
+	reqCtx := setupTestContext()
+	permissions := fullPermissions()
+
+	t.Run("Should use legacy navigation when flag is off", func(t *testing.T) {
+		service := setupTestService(permissions) // No feature flags
+
+		navLink := service.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+		require.Equal(t, "Alerting", navLink.Text)
+		require.Equal(t, navtree.NavIDAlerting, navLink.Id)
+
+		// Legacy structure: flat children without nested items
+		require.NotEmpty(t, navLink.Children)
+		alertList := findNavLink(navLink, "alert-list")
+		receivers := findNavLink(navLink, "receivers")
+
+		require.NotNil(t, alertList, "Should have alert-list in legacy navigation")
+		require.NotNil(t, receivers, "Should have receivers in legacy navigation")
+		require.Empty(t, alertList.Children, "Legacy items should not have nested children")
+		require.Empty(t, receivers.Children, "Legacy items should not have nested children")
+	})
+
+	t.Run("Should use V2 navigation when flag is on", func(t *testing.T) {
+		service := setupTestService(permissions, "alertingNavigationV2")
+
+		navLink := service.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+		require.Equal(t, "Alerting", navLink.Text)
+		require.Equal(t, navtree.NavIDAlerting, navLink.Id)
+
+		// V2 structure: grouped parents with nested children
+		require.NotEmpty(t, navLink.Children)
+
+		// Verify all expected parent items exist with children
+		expectedParents := []string{"alert-rules", "notification-config", "insights", "alerting-settings"}
+		for _, parentId := range expectedParents {
+			parent := findNavLink(navLink, parentId)
+			require.NotNil(t, parent, "Should have %s parent in V2 navigation", parentId)
+			require.NotEmpty(t, parent.Children, "V2 parent %s should have children", parentId)
+		}
+
+		// Verify alert-rules has expected tab
+		alertRules := findNavLink(navLink, "alert-rules")
+		require.True(t, hasChildWithId(alertRules, "alert-rules-list"), "Should have alert-rules-list tab")
+	})
+}
+
+func TestBuildAlertNavLinks_Legacy(t *testing.T) {
+	reqCtx := setupTestContext()
+
+	t.Run("Should include all expected items in legacy navigation", func(t *testing.T) {
+		service := setupTestService(fullPermissions())
+		navLink := service.buildAlertNavLinksLegacy(reqCtx)
+		require.NotNil(t, navLink)
+
+		expectedIds := []string{"alert-list", "receivers", "am-routes", "alerting-admin"}
+		for _, expectedId := range expectedIds {
+			require.NotNil(t, findNavLink(navLink, expectedId), "Should have %s in legacy navigation", expectedId)
+		}
+	})
+
+	t.Run("Should respect permissions in legacy navigation", func(t *testing.T) {
+		limitedPermissions := []ac.Permission{
+			{Action: ac.ActionAlertingRuleRead, Scope: "*"},
+		}
+		limitedService := setupTestService(limitedPermissions)
+
+		navLink := limitedService.buildAlertNavLinksLegacy(reqCtx)
+		require.NotNil(t, navLink)
+
+		require.NotNil(t, findNavLink(navLink, "alert-list"), "Should have alert rules with read permission")
+		require.Nil(t, findNavLink(navLink, "receivers"), "Should not have contact points without notification permissions")
+	})
+}
+
+func TestBuildAlertNavLinks_V2(t *testing.T) {
+	reqCtx := setupTestContext()
+	allFeatureFlags := []string{"alertingNavigationV2", "alertingTriage", "alertingCentralAlertHistory", "alertRuleRestore", "alertingRuleRecoverDeleted"}
+	service := setupTestService(fullPermissions(), allFeatureFlags...)
+
+	t.Run("Should have correct parent structure in V2 navigation", func(t *testing.T) {
+		navLink := service.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+		require.NotEmpty(t, navLink.Children)
+
+		// Verify all parent items exist with children
+		parentIds := []string{"alert-rules", "notification-config", "insights", "alerting-settings"}
+		for _, parentId := range parentIds {
+			parent := findNavLink(navLink, parentId)
+			require.NotNil(t, parent, "Should have parent %s in V2 navigation", parentId)
+			require.NotEmpty(t, parent.Children, "Parent %s should have children", parentId)
+		}
+	})
+
+	t.Run("Should have correct tabs under each parent", func(t *testing.T) {
+		navLink := service.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+
+		// Table-driven test for tab verification
+		tests := []struct {
+			parentId     string
+			expectedTabs []string
+		}{
+			{"alert-rules", []string{"alert-rules-list", "alert-rules-recently-deleted"}},
+			{"notification-config", []string{"notification-config-contact-points", "notification-config-policies", "notification-config-templates", "notification-config-time-intervals"}},
+			{"insights", []string{"insights-system", "insights-history"}},
+		}
+
+		for _, tt := range tests {
+			parent := findNavLink(navLink, tt.parentId)
+			require.NotNil(t, parent, "Should have %s parent", tt.parentId)
+
+			for _, expectedTab := range tt.expectedTabs {
+				require.True(t, hasChildWithId(parent, expectedTab), "Parent %s should have tab %s", tt.parentId, expectedTab)
+			}
+		}
+	})
+
+	t.Run("Should respect permissions in V2 navigation", func(t *testing.T) {
+		limitedPermissions := []ac.Permission{
+			{Action: ac.ActionAlertingRuleRead, Scope: "*"},
+		}
+		limitedService := setupTestService(limitedPermissions, "alertingNavigationV2")
+
+		navLink := limitedService.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+
+		// Should not have notification-config without notification permissions
+		require.Nil(t, findNavLink(navLink, "notification-config"), "Should not have notification-config without permissions")
+	})
+
+	t.Run("Should exclude future items from V2 navigation", func(t *testing.T) {
+		navLink := service.buildAlertNavLinks(reqCtx)
+		require.NotNil(t, navLink)
+
+		// Verify future items are not present
+		futureIds := []string{
+			"alert-rules-recording-rules",
+			"alert-rules-evaluation-chains",
+			"insights-alert-optimizer",
+			"insights-notification-history",
+		}
+
+		for _, futureId := range futureIds {
+			require.Nil(t, findNavLink(navLink, futureId), "Should not have future item %s", futureId)
+		}
+	})
+}

public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx

@@ -11,6 +11,7 @@ import { reportInteraction } from '@grafana/runtime';
 import { ScrollContainer, useStyles2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { setBookmark } from 'app/core/reducers/navBarTree';
+import { shouldUseAlertingNavigationV2 } from 'app/features/alerting/unified/featureToggles';
 import { useDispatch, useSelector } from 'app/types/store';
 
 import { MegaMenuExtensionPoint } from './MegaMenuExtensionPoint';
@@ -37,9 +38,25 @@ export const MegaMenu = memo(
     const pinnedItems = usePinnedItems();
 
     // Remove profile + help from tree
+    // For Alerting V2 navigation, flatten the sidebar to show only top-level items (hide nested children/tabs)
+    const useV2Nav = shouldUseAlertingNavigationV2();
     const navItems = navTree
       .filter((item) => item.id !== 'profile' && item.id !== 'help')
-      .map((item) => enrichWithInteractionTracking(item, state.megaMenuDocked));
+      .map((item) => {
+        const enriched = enrichWithInteractionTracking(item, state.megaMenuDocked);
+        // If this is Alerting section and V2 navigation is enabled, flatten children for sidebar display
+        // Children are still available in navIndex for breadcrumbs and page navigation
+        if (useV2Nav && item.id === 'alerting' && enriched.children) {
+          return {
+            ...enriched,
+            children: enriched.children.map((child) => ({
+              ...child,
+              children: undefined, // Remove nested children from sidebar, but keep them for page navigation
+            })),
+          };
+        }
+        return enriched;
+      });
 
     const bookmarksItem = navItems.find((item) => item.id === 'bookmarks');
     if (bookmarksItem) {

public/app/core/components/Breadcrumbs/utils.ts

@@ -35,11 +35,18 @@ export function buildBreadcrumbs(sectionNav: NavModelItem, pageNav?: NavModelIte
 
     if (shouldAddCrumb) {
       const activeChildIndex = node.children?.findIndex((child) => child.active) ?? -1;
-      // Add tab to breadcrumbs if it's not the first active child
-      if (activeChildIndex > 0) {
+      // Add active tab to breadcrumbs if it exists and its URL is different from the node's URL
+      // This ensures tabs show in breadcrumbs (including the first tab) while preventing duplication
+      if (activeChildIndex >= 0) {
         const activeChild = node.children?.[activeChildIndex];
         if (activeChild) {
-          crumbs.unshift({ text: activeChild.text, href: activeChild.url ?? '' });
+          // Only add the active child if its URL doesn't match the node's URL
+          // This prevents duplication when the pageNav is the active tab
+          const nodeUrl = node.url?.split('?')[0] ?? '';
+          const childUrl = activeChild.url?.split('?')[0] ?? '';
+          if (nodeUrl !== childUrl) {
+            crumbs.unshift({ text: activeChild.text, href: activeChild.url ?? '' });
+          }
         }
       }
       crumbs.unshift({ text: node.text, href: node.url ?? '' });

public/app/features/alerting/routes.tsx

@@ -56,6 +56,17 @@ export function getAlertingRoutes(cfg = config): RouteDescriptor[] {
           )
       ),
     },
+    {
+      path: '/alerting/time-intervals',
+      roles: evaluateAccess([
+        AccessControlAction.AlertingNotificationsRead,
+        AccessControlAction.AlertingNotificationsExternalRead,
+        ...PERMISSIONS_TIME_INTERVALS_READ,
+      ]),
+      component: importAlertingComponent(
+        () => import(/* webpackChunkName: "TimeIntervalsPage" */ 'app/features/alerting/unified/TimeIntervalsPage')
+      ),
+    },
     {
       path: '/alerting/routes/mute-timing/new',
       roles: evaluateAccess([
@@ -212,6 +223,13 @@ export function getAlertingRoutes(cfg = config): RouteDescriptor[] {
           )
       ),
     },
+    {
+      path: '/alerting/insights',
+      roles: evaluateAccess([AccessControlAction.AlertingRuleRead, AccessControlAction.AlertingRuleExternalRead]),
+      component: importAlertingComponent(
+        () => import(/* webpackChunkName: "InsightsPage" */ 'app/features/alerting/unified/insights/InsightsPage')
+      ),
+    },
     {
       path: '/alerting/recently-deleted/',
       roles: () => ['Admin'],

public/app/features/alerting/unified/AlertGroups.tsx

@@ -14,6 +14,7 @@ import { AlertGroupFilter } from './components/alert-groups/AlertGroupFilter';
 import { useFilteredAmGroups } from './hooks/useFilteredAmGroups';
 import { useGroupedAlerts } from './hooks/useGroupedAlerts';
 import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector';
+import { useAlertActivityNav } from './navigation/useAlertActivityNav';
 import { useAlertmanager } from './state/AlertmanagerContext';
 import { fetchAlertGroupsAction } from './state/actions';
 import { NOTIFICATIONS_POLL_INTERVAL_MS } from './utils/constants';
@@ -113,8 +114,9 @@ const AlertGroups = () => {
 };
 
 function AlertGroupsPage() {
+  const { navId, pageNav } = useAlertActivityNav();
   return (
-    <AlertmanagerPageWrapper navId="groups" accessType="instance">
+    <AlertmanagerPageWrapper navId={navId || 'groups'} pageNav={pageNav} accessType="instance">
       <AlertGroups />
     </AlertmanagerPageWrapper>
   );

public/app/features/alerting/unified/NotificationPoliciesPage.test.tsx

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
-import { render, screen, userEvent, within } from 'test/test-utils';
+import { render, screen, testWithFeatureToggles, userEvent, within } from 'test/test-utils';
 import { byLabelText, byRole, byTestId } from 'testing-library-selector';
 
 import { AppNotificationList } from 'app/core/components/AppNotifications/AppNotificationList';
@@ -140,6 +140,39 @@ const getRootRoute = async () => {
 };
 
 describe('NotificationPolicies', () => {
+  describe('V2 Navigation Mode', () => {
+    testWithFeatureToggles({ enable: ['alertingNavigationV2'] });
+
+    beforeEach(() => {
+      setupDataSources(dataSources.am);
+      grantUserPermissions([
+        AccessControlAction.AlertingNotificationsRead,
+        AccessControlAction.AlertingNotificationsWrite,
+        ...PERMISSIONS_NOTIFICATION_POLICIES,
+      ]);
+    });
+
+    it('shows only notification policies without internal tabs', async () => {
+      renderNotificationPolicies();
+
+      // Should show notification policies directly
+      expect(await ui.rootRouteContainer.find()).toBeInTheDocument();
+
+      // Should not have tabs
+      expect(screen.queryByRole('tab')).not.toBeInTheDocument();
+    });
+
+    it('does not show time intervals tab in V2 mode', async () => {
+      renderNotificationPolicies();
+
+      // Should show notification policies
+      expect(await ui.rootRouteContainer.find()).toBeInTheDocument();
+
+      // Should not show time intervals tab
+      expect(screen.queryByText(/time intervals/i)).not.toBeInTheDocument();
+    });
+  });
+
   // combobox hack :/
   beforeAll(() => {
     const mockGetBoundingClientRect = jest.fn(() => ({

public/app/features/alerting/unified/NotificationPoliciesPage.tsx

@@ -12,6 +12,8 @@ import { AlertmanagerAction, useAlertmanagerAbility } from 'app/features/alertin
 import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper';
 import { GrafanaAlertmanagerWarning } from './components/GrafanaAlertmanagerWarning';
 import { TimeIntervalsTable } from './components/mute-timings/MuteTimingsTable';
+import { shouldUseAlertingNavigationV2 } from './featureToggles';
+import { useNotificationConfigNav } from './navigation/useNotificationConfigNav';
 import { useAlertmanager } from './state/AlertmanagerContext';
 import { withPageErrorBoundary } from './withPageErrorBoundary';
 
@@ -106,9 +108,32 @@ function getActiveTabFromUrl(queryParams: UrlQueryMap, defaultTab: ActiveTab): Q
   };
 }
 
-function NotificationPoliciesPage() {
+const NotificationPoliciesContent = () => {
+  const { selectedAlertmanager = '' } = useAlertmanager();
   return (
-    <AlertmanagerPageWrapper navId="am-routes" accessType="notification">
+    <>
+      <GrafanaAlertmanagerWarning currentAlertmanager={selectedAlertmanager} />
+      <NotificationPoliciesList />
+    </>
+  );
+};
+
+function NotificationPoliciesPage() {
+  const useV2Nav = shouldUseAlertingNavigationV2();
+  const { navId, pageNav } = useNotificationConfigNav();
+
+  // In V2 mode, show only notification policies (no internal tabs)
+  if (useV2Nav) {
+    return (
+      <AlertmanagerPageWrapper navId={navId || 'am-routes'} pageNav={pageNav} accessType="notification">
+        <NotificationPoliciesContent />
+      </AlertmanagerPageWrapper>
+    );
+  }
+
+  // Legacy mode: Show internal tabs (backward compatible)
+  return (
+    <AlertmanagerPageWrapper navId={navId || 'am-routes'} pageNav={pageNav} accessType="notification">
       <NotificationPoliciesTabs />
     </AlertmanagerPageWrapper>
   );

public/app/features/alerting/unified/Templates.tsx

@@ -1,13 +1,56 @@
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
+import { Trans } from '@grafana/i18n';
+import { LinkButton, Stack, Text } from '@grafana/ui';
+
+import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper';
 import DuplicateMessageTemplate from './components/contact-points/DuplicateMessageTemplate';
 import EditMessageTemplate from './components/contact-points/EditMessageTemplate';
 import NewMessageTemplate from './components/contact-points/NewMessageTemplate';
+import { NotificationTemplates } from './components/contact-points/NotificationTemplates';
+import { shouldUseAlertingNavigationV2 } from './featureToggles';
+import { AlertmanagerAction, useAlertmanagerAbility } from './hooks/useAbilities';
+import { useNotificationConfigNav } from './navigation/useNotificationConfigNav';
 import { withPageErrorBoundary } from './withPageErrorBoundary';
 
-function NotificationTemplates() {
+const TemplatesList = () => {
+  const [createTemplateSupported, createTemplateAllowed] = useAlertmanagerAbility(
+    AlertmanagerAction.CreateNotificationTemplate
+  );
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Text variant="body" color="secondary">
+          <Trans i18nKey="alerting.notification-templates-tab.create-notification-templates-customize-notifications">
+            Create notification templates to customize your notifications.
+          </Trans>
+        </Text>
+        {createTemplateSupported && (
+          <LinkButton
+            icon="plus"
+            variant="primary"
+            href="/alerting/notifications/templates/new"
+            disabled={!createTemplateAllowed}
+          >
+            <Trans i18nKey="alerting.notification-templates-tab.add-notification-template-group">
+              Add notification template group
+            </Trans>
+          </LinkButton>
+        )}
+      </Stack>
+      <NotificationTemplates />
+    </>
+  );
+};
+
+function NotificationTemplatesRoutes() {
+  const useV2Nav = shouldUseAlertingNavigationV2();
+
   return (
     <Routes>
+      {/* In V2 mode, show templates list on base route */}
+      {useV2Nav && <Route path="" element={<TemplatesList />} />}
       <Route path="new" element={<NewMessageTemplate />} />
       <Route path=":name/edit" element={<EditMessageTemplate />} />
       <Route path=":name/duplicate" element={<DuplicateMessageTemplate />} />
@@ -15,4 +58,21 @@ function NotificationTemplates() {
   );
 }
 
-export default withPageErrorBoundary(NotificationTemplates);
+function NotificationTemplatesPage() {
+  const useV2Nav = shouldUseAlertingNavigationV2();
+  const { navId, pageNav } = useNotificationConfigNav();
+
+  // In V2 mode, wrap with page wrapper for proper navigation
+  if (useV2Nav) {
+    return (
+      <AlertmanagerPageWrapper navId={navId || 'receivers'} pageNav={pageNav} accessType="notification">
+        <NotificationTemplatesRoutes />
+      </AlertmanagerPageWrapper>
+    );
+  }
+
+  // In legacy mode, just render routes (templates are accessed via ContactPoints page tabs)
+  return <NotificationTemplatesRoutes />;
+}
+
+export default withPageErrorBoundary(NotificationTemplatesPage);

public/app/features/alerting/unified/TimeIntervalsPage.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen, testWithFeatureToggles } from 'test/test-utils';
+
+import { configureStore } from 'app/store/configureStore';
+import { AccessControlAction } from 'app/types/accessControl';
+
+import TimeIntervalsPage from './TimeIntervalsPage';
+import { defaultConfig } from './components/mute-timings/mocks';
+import { setupMswServer } from './mockApi';
+import { grantUserPermissions, mockDataSource } from './mocks';
+import { setTimeIntervalsListEmpty } from './mocks/server/configure';
+import { setAlertmanagerConfig } from './mocks/server/entities/alertmanagers';
+import { setupDataSources } from './testSetup/datasources';
+import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource';
+
+setupMswServer();
+
+const alertManager = mockDataSource({
+  name: 'Alertmanager',
+  type: DataSourceType.Alertmanager,
+});
+
+describe('TimeIntervalsPage', () => {
+  describe('V2 Navigation Mode', () => {
+    testWithFeatureToggles({ enable: ['alertingNavigationV2'] });
+
+    beforeEach(() => {
+      setupDataSources(alertManager);
+      setAlertmanagerConfig(GRAFANA_RULES_SOURCE_NAME, defaultConfig);
+      setTimeIntervalsListEmpty(); // Mock empty time intervals list so component renders
+      grantUserPermissions([
+        AccessControlAction.AlertingNotificationsRead,
+        AccessControlAction.AlertingTimeIntervalsRead,
+      ]);
+    });
+
+    it('renders time intervals table', async () => {
+      const mockNavIndex = {
+        'notification-config': {
+          id: 'notification-config',
+          text: 'Notification configuration',
+          url: '/alerting/notifications',
+        },
+        'notification-config-time-intervals': {
+          id: 'notification-config-time-intervals',
+          text: 'Time intervals',
+          url: '/alerting/time-intervals',
+        },
+      };
+      const store = configureStore({
+        navIndex: mockNavIndex,
+      });
+
+      render(<TimeIntervalsPage />, {
+        store,
+        historyOptions: {
+          initialEntries: ['/alerting/time-intervals'],
+        },
+      });
+
+      // Should show time intervals content
+      // When empty, it shows "You haven't created any time intervals yet"
+      // When loading, it shows "Loading time intervals..."
+      // When error, it shows "Error loading time intervals"
+      // All contain "time intervals" - use getAllByText since there are multiple matches (tab, description, empty state)
+      const timeIntervalsTexts = await screen.findAllByText(/time intervals/i, {}, { timeout: 5000 });
+      expect(timeIntervalsTexts.length).toBeGreaterThan(0);
+    });
+
+    it('returns null in legacy mode', () => {
+      // This test verifies that the component returns null when V2 is disabled
+      // The feature toggle is controlled by testWithFeatureToggles, so we test it separately
+      const { container } = render(<TimeIntervalsPage />, {
+        historyOptions: {
+          initialEntries: ['/alerting/time-intervals'],
+        },
+      });
+      // In V2 mode (enabled by testWithFeatureToggles), it should render content
+      expect(container).not.toBeEmptyDOMElement();
+    });
+  });
+});

public/app/features/alerting/unified/TimeIntervalsPage.tsx

@@ -0,0 +1,40 @@
+import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper';
+import { GrafanaAlertmanagerWarning } from './components/GrafanaAlertmanagerWarning';
+import { TimeIntervalsTable } from './components/mute-timings/MuteTimingsTable';
+import { shouldUseAlertingNavigationV2 } from './featureToggles';
+import { useNotificationConfigNav } from './navigation/useNotificationConfigNav';
+import { useAlertmanager } from './state/AlertmanagerContext';
+import { withPageErrorBoundary } from './withPageErrorBoundary';
+
+// Content component that uses AlertmanagerContext
+// This must be rendered within AlertmanagerPageWrapper
+function TimeIntervalsPageContent() {
+  const { selectedAlertmanager } = useAlertmanager();
+
+  return (
+    <>
+      <GrafanaAlertmanagerWarning currentAlertmanager={selectedAlertmanager!} />
+      <TimeIntervalsTable />
+    </>
+  );
+}
+
+function TimeIntervalsPage() {
+  const useV2Nav = shouldUseAlertingNavigationV2();
+  const { navId, pageNav } = useNotificationConfigNav();
+
+  // In V2 mode, wrap with page wrapper for proper navigation
+  // AlertmanagerPageWrapper provides AlertmanagerContext, so TimeIntervalsPageContent can use useAlertmanager
+  if (useV2Nav) {
+    return (
+      <AlertmanagerPageWrapper navId={navId || 'am-routes'} pageNav={pageNav} accessType="notification">
+        <TimeIntervalsPageContent />
+      </AlertmanagerPageWrapper>
+    );
+  }
+
+  // Legacy mode: not used (handled by NotificationPoliciesPage)
+  return null;
+}
+
+export default withPageErrorBoundary(TimeIntervalsPage);

public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx

@@ -1,6 +1,14 @@
 import { MemoryHistoryBuildOptions } from 'history';
 import { ComponentProps, ReactNode } from 'react';
-import { render, screen, userEvent, waitFor, waitForElementToBeRemoved, within } from 'test/test-utils';
+import {
+  render,
+  screen,
+  testWithFeatureToggles,
+  userEvent,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+} from 'test/test-utils';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { MIMIR_DATASOURCE_UID } from 'app/features/alerting/unified/mocks/server/constants';
@@ -170,6 +178,30 @@ describe('contact points', () => {
       });
     });
 
+    describe('V2 Navigation Mode', () => {
+      testWithFeatureToggles({ enable: ['alertingNavigationV2'] });
+
+      test('shows only contact points without internal tabs', async () => {
+        renderWithProvider(<ContactPointsPageContents />);
+
+        // Should show contact points directly
+        expect(await screen.findByText(/create contact point/i)).toBeInTheDocument();
+
+        // Should not have tabs
+        expect(screen.queryByRole('tab')).not.toBeInTheDocument();
+      });
+
+      test('does not show templates tab in V2 mode', async () => {
+        renderWithProvider(<ContactPointsPageContents />);
+
+        // Should show contact points
+        expect(await screen.findByText(/create contact point/i)).toBeInTheDocument();
+
+        // Should not show templates tab
+        expect(screen.queryByText(/notification templates/i)).not.toBeInTheDocument();
+      });
+    });
+
     describe('templates tab', () => {
       it('does not show a warning for a "misconfigured" template', async () => {
         renderWithProvider(

public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx

@@ -1,5 +1,7 @@
+import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import {
   Alert,
@@ -13,15 +15,18 @@ import {
   TabContent,
   TabsBar,
   Text,
+  useStyles2,
 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { shouldUseK8sApi } from 'app/features/alerting/unified/utils/k8s/utils';
 import { makeAMLink, stringifyErrorLike } from 'app/features/alerting/unified/utils/misc';
 import { AccessControlAction } from 'app/types/accessControl';
 
+import { shouldUseAlertingNavigationV2 } from '../../featureToggles';
 import { AlertmanagerAction, useAlertmanagerAbility } from '../../hooks/useAbilities';
 import { usePagination } from '../../hooks/usePagination';
 import { useURLSearchParams } from '../../hooks/useURLSearchParams';
+import { useNotificationConfigNav } from '../../navigation/useNotificationConfigNav';
 import { useAlertmanager } from '../../state/AlertmanagerContext';
 import { isExtraConfig } from '../../utils/alertmanager/extraConfigs';
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
@@ -99,7 +104,7 @@ const ContactPointsTab = () => {
   }
 
   return (
-    <>
+    <Stack direction="column" gap={1}>
       {/* TODO we can add some additional info here with a ToggleTip */}
       <Stack direction="row" alignItems="end" justifyContent="space-between">
         <ContactPointsFilter />
@@ -148,7 +153,7 @@ const ContactPointsTab = () => {
         <GlobalConfigAlert alertManagerName={selectedAlertmanager!} />
       )}
       {ExportDrawer}
-    </>
+    </Stack>
   );
 };
 
@@ -158,7 +163,7 @@ const NotificationTemplatesTab = () => {
   );
 
   return (
-    <>
+    <Stack direction="column" gap={1}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Text variant="body" color="secondary">
           <Trans i18nKey="alerting.notification-templates-tab.create-notification-templates-customize-notifications">
@@ -179,7 +184,7 @@ const NotificationTemplatesTab = () => {
         )}
       </Stack>
       <NotificationTemplates />
-    </>
+    </Stack>
   );
 };
 
@@ -201,6 +206,10 @@ const useTabQueryParam = (defaultTab: ActiveTab) => {
 
 export const ContactPointsPageContents = () => {
   const { selectedAlertmanager } = useAlertmanager();
+  const useV2Nav = shouldUseAlertingNavigationV2();
+  const styles = useStyles2(getStyles);
+
+  // All hooks must be called unconditionally before any early returns
   const [, canViewContactPoints] = useAlertmanagerAbility(AlertmanagerAction.ViewContactPoint);
   const [, canCreateContactPoints] = useAlertmanagerAbility(AlertmanagerAction.CreateContactPoint);
   const [, showTemplatesTab] = useAlertmanagerAbility(AlertmanagerAction.ViewNotificationTemplate);
@@ -220,6 +229,19 @@ export const ContactPointsPageContents = () => {
     alertmanager: selectedAlertmanager!,
   });
 
+  // In V2 navigation mode, show only contact points (no internal tabs)
+  // Templates are accessible via the sidebar navigation
+  if (useV2Nav) {
+    return (
+      <>
+        <GrafanaAlertmanagerWarning currentAlertmanager={selectedAlertmanager!} />
+        <ContactPointsTab />
+      </>
+    );
+  }
+
+  // Legacy mode: Show internal tabs (backward compatible)
+
   const showingContactPoints = activeTab === ActiveTab.ContactPoints;
   const showNotificationTemplates = activeTab === ActiveTab.NotificationTemplates;
 
@@ -244,7 +266,7 @@ export const ContactPointsPageContents = () => {
             />
           )}
         </TabsBar>
-        <TabContent>
+        <TabContent className={styles.tabContent}>
           <Stack direction="column">
             {showingContactPoints && <ContactPointsTab />}
             {showNotificationTemplates && <NotificationTemplatesTab />}
@@ -281,9 +303,16 @@ const ContactPointsList = ({ contactPoints, search, pageSize = DEFAULT_PAGE_SIZE
   );
 };
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  tabContent: css({
+    marginTop: theme.spacing(2),
+  }),
+});
+
 function ContactPointsPage() {
+  const { navId, pageNav } = useNotificationConfigNav();
   return (
-    <AlertmanagerPageWrapper navId="receivers" accessType="notification">
+    <AlertmanagerPageWrapper navId={navId || 'receivers'} pageNav={pageNav} accessType="notification">
       <ContactPointsPageContents />
     </AlertmanagerPageWrapper>
   );

public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryPage.tsx

@@ -1,11 +1,13 @@
+import { useInsightsNav } from '../../../navigation/useInsightsNav';
 import { withPageErrorBoundary } from '../../../withPageErrorBoundary';
 import { AlertingPageWrapper } from '../../AlertingPageWrapper';
 
 import { CentralAlertHistoryScene } from './CentralAlertHistoryScene';
 
 function HistoryPage() {
+  const { navId, pageNav } = useInsightsNav();
   return (
-    <AlertingPageWrapper navId="alerts-history" isLoading={false}>
+    <AlertingPageWrapper navId={navId || 'alerts-history'} pageNav={pageNav} isLoading={false}>
       <CentralAlertHistoryScene />
     </AlertingPageWrapper>
   );

public/app/features/alerting/unified/components/rules/deleted-rules/DeletedRulesPage.tsx

@@ -3,6 +3,7 @@ import { Alert } from '@grafana/ui';
 
 import { alertRuleApi } from '../../../api/alertRuleApi';
 import { GRAFANA_RULER_CONFIG } from '../../../api/featureDiscoveryApi';
+import { useAlertRulesNav } from '../../../navigation/useAlertRulesNav';
 import { stringifyErrorLike } from '../../../utils/misc';
 import { withPageErrorBoundary } from '../../../withPageErrorBoundary';
 import { AlertingPageWrapper } from '../../AlertingPageWrapper';
@@ -18,9 +19,10 @@ function DeletedrulesPage() {
     rulerConfig: GRAFANA_RULER_CONFIG,
     filter: {}, // todo: add filters, and limit?????
   });
+  const { navId, pageNav } = useAlertRulesNav();
 
   return (
-    <AlertingPageWrapper navId="alerts/recently-deleted" isLoading={isLoading}>
+    <AlertingPageWrapper navId={navId || 'alerts/recently-deleted'} pageNav={pageNav} isLoading={isLoading}>
       <>
         {error && (
           <Alert title={t('alerting.deleted-rules.errorloading', 'Failed to load alert deleted rules')}>

public/app/features/alerting/unified/featureToggles.ts

@@ -31,3 +31,8 @@ export const shouldUseFullyCompatibleBackendFilters = () =>
  * Saved searches feature - allows users to save and apply search queries on the Alert Rules page.
  */
 export const shouldUseSavedSearches = () => config.featureToggles.alertingSavedSearches ?? false;
+
+/**
+ * New grouped navigation structure for Alerting
+ */
+export const shouldUseAlertingNavigationV2 = () => config.featureToggles.alertingNavigationV2 ?? false;

public/app/features/alerting/unified/home/Home.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { t } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
 import { Box, Stack, Tab, TabContent, TabsBar } from '@grafana/ui';
 
 import { AlertingPageWrapper } from '../components/AlertingPageWrapper';
@@ -14,10 +15,13 @@ import { PluginIntegrations } from './PluginIntegrations';
 import SyntheticMonitoringCard from './SyntheticMonitoringCard';
 
 function Home() {
-  const insightsEnabled = insightsIsAvailable() || isLocalDevEnv();
+  // When V2 navigation is enabled, don't show Insights tab on Home page
+  // (Insights is available via the sidebar Insights menu instead)
+  const insightsEnabled = (insightsIsAvailable() || isLocalDevEnv()) && !config.featureToggles.alertingNavigationV2;
 
   const [activeTab, setActiveTab] = useState<'insights' | 'overview'>(insightsEnabled ? 'insights' : 'overview');
-  const insightsScene = getInsightsScenes();
+  // Memoize the scene so it's only created once and properly initialized
+  const insightsScene = useMemo(() => getInsightsScenes(), []);
 
   return (
     <AlertingPageWrapper subTitle="Learn about problems in your systems moments after they occur" navId="alerting">

public/app/features/alerting/unified/insights/InsightsPage.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { Trans, t } from '@grafana/i18n';
+
+import { AlertingPageWrapper } from '../components/AlertingPageWrapper';
+import { getInsightsScenes, insightsIsAvailable } from '../home/Insights';
+import { useInsightsNav } from '../navigation/useInsightsNav';
+import { isLocalDevEnv } from '../utils/misc';
+import { withPageErrorBoundary } from '../withPageErrorBoundary';
+
+function InsightsPage() {
+  const insightsEnabled = insightsIsAvailable() || isLocalDevEnv();
+  const { navId, pageNav } = useInsightsNav();
+  // Memoize the scene so it's only created once and properly initialized
+  const insightsScene = useMemo(() => getInsightsScenes(), []);
+
+  if (!insightsEnabled) {
+    return (
+      <AlertingPageWrapper
+        navId={navId || 'insights'}
+        pageNav={pageNav}
+        subTitle={t('alerting.insights.subtitle', 'Analytics and history for alerting')}
+      >
+        <div>
+          <Trans i18nKey="alerting.insights.not-available">
+            Insights are not available. Please configure the required data sources.
+          </Trans>
+        </div>
+      </AlertingPageWrapper>
+    );
+  }
+
+  return (
+    <AlertingPageWrapper
+      navId={navId || 'insights'}
+      pageNav={pageNav}
+      subTitle={t('alerting.insights.subtitle', 'Analytics and history for alerting')}
+    >
+      <insightsScene.Component model={insightsScene} />
+    </AlertingPageWrapper>
+  );
+}
+
+export default withPageErrorBoundary(InsightsPage);

public/app/features/alerting/unified/navigation/useAlertActivityNav.test.tsx

@@ -0,0 +1,187 @@
+import { renderHook } from '@testing-library/react';
+import { getWrapper } from 'test/test-utils';
+
+import { config } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { useAlertActivityNav } from './useAlertActivityNav';
+
+describe('useAlertActivityNav', () => {
+  const mockNavIndex = {
+    'alert-activity': {
+      id: 'alert-activity',
+      text: 'Alert activity',
+      url: '/alerting/alerts',
+    },
+    'alert-activity-alerts': {
+      id: 'alert-activity-alerts',
+      text: 'Alerts',
+      url: '/alerting/alerts',
+    },
+    'alert-activity-groups': {
+      id: 'alert-activity-groups',
+      text: 'Active notifications',
+      url: '/alerting/groups',
+    },
+    groups: {
+      id: 'groups',
+      text: 'Alert groups',
+      url: '/alerting/groups',
+    },
+    'alert-alerts': {
+      id: 'alert-alerts',
+      text: 'Alerts',
+      url: '/alerting/alerts',
+    },
+  };
+
+  const defaultPreloadedState = {
+    navIndex: mockNavIndex,
+  };
+
+  beforeEach(() => {
+    config.featureToggles.alertingNavigationV2 = false;
+  });
+
+  it('should return legacy navId when feature flag is off for /alerting/groups', () => {
+    const wrapper = getWrapper({
+      preloadedState: defaultPreloadedState,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/groups'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    expect(result.current.navId).toBe('groups');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+
+  it('should return legacy navId when feature flag is off for /alerting/alerts', () => {
+    const wrapper = getWrapper({
+      preloadedState: defaultPreloadedState,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/alerts'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alert-alerts');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+
+  it('should return V2 navigation when feature flag is on for Alerts tab', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/alerts'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alert-activity');
+    expect(result.current.pageNav).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children).toBeDefined();
+    // The pageNav should represent Alert Activity (not the active tab) for consistent title
+    expect(result.current.pageNav?.text).toBe('Alert activity');
+  });
+
+  it('should return V2 navigation when feature flag is on for Active notifications tab', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/groups'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alert-activity');
+    expect(result.current.pageNav).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children).toBeDefined();
+    // The pageNav should represent Alert Activity (not the active tab) for consistent title
+    expect(result.current.pageNav?.text).toBe('Alert activity');
+  });
+
+  it('should set active tab based on current path', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/groups'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const activeNotificationsTab = result.current.pageNav?.children?.find((tab) => tab.id === 'alert-activity-groups');
+    expect(activeNotificationsTab?.active).toBe(true);
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const alertsTab = result.current.pageNav?.children?.find((tab) => tab.id === 'alert-activity-alerts');
+    expect(alertsTab?.active).toBe(false);
+  });
+
+  it('should filter tabs based on permissions', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const limitedNavIndex = {
+      'alert-activity': mockNavIndex['alert-activity'],
+      'alert-activity-alerts': mockNavIndex['alert-activity-alerts'],
+      // Missing 'alert-activity-groups' - user doesn't have permission
+    };
+    const store = configureStore({
+      navIndex: limitedNavIndex,
+    });
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/alerts'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.length).toBe(1);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.[0].id).toBe('alert-activity-alerts');
+  });
+
+  it('should fallback to legacy when alert-activity nav is missing', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore({
+      navIndex: {
+        groups: mockNavIndex.groups,
+        'alert-alerts': mockNavIndex['alert-alerts'],
+      },
+    });
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/groups'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertActivityNav(), { wrapper });
+
+    expect(result.current.navId).toBe('groups');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+});

public/app/features/alerting/unified/navigation/useAlertActivityNav.ts

@@ -0,0 +1,93 @@
+import { useLocation } from 'react-router-dom-v5-compat';
+
+import { NavModelItem } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { useSelector } from 'app/types/store';
+
+import { shouldUseAlertingNavigationV2 } from '../featureToggles';
+
+export function useAlertActivityNav() {
+  const location = useLocation();
+  const navIndex = useSelector((state) => state.navIndex);
+  const useV2Nav = shouldUseAlertingNavigationV2();
+
+  // If V2 navigation is not enabled, return legacy navId
+  if (!useV2Nav) {
+    if (location.pathname === '/alerting/groups') {
+      return {
+        navId: 'groups',
+        pageNav: undefined,
+      };
+    }
+    if (location.pathname === '/alerting/alerts') {
+      return {
+        navId: 'alert-alerts',
+        pageNav: undefined,
+      };
+    }
+    return {
+      navId: undefined,
+      pageNav: undefined,
+    };
+  }
+
+  const alertActivityNav = navIndex['alert-activity'];
+  if (!alertActivityNav) {
+    // Fallback to legacy
+    if (location.pathname === '/alerting/groups') {
+      return {
+        navId: 'groups',
+        pageNav: undefined,
+      };
+    }
+    if (location.pathname === '/alerting/alerts') {
+      return {
+        navId: 'alert-alerts',
+        pageNav: undefined,
+      };
+    }
+    return {
+      navId: undefined,
+      pageNav: undefined,
+    };
+  }
+
+  // All available tabs
+  const allTabs = [
+    {
+      id: 'alert-activity-alerts',
+      text: t('alerting.navigation.alerts', 'Alerts'),
+      url: '/alerting/alerts',
+      active: location.pathname === '/alerting/alerts',
+      icon: 'bell',
+      parentItem: alertActivityNav,
+    },
+    {
+      id: 'alert-activity-groups',
+      text: t('alerting.navigation.active-notifications', 'Active notifications'),
+      url: '/alerting/groups',
+      active: location.pathname === '/alerting/groups',
+      icon: 'layer-group',
+      parentItem: alertActivityNav,
+    },
+  ].filter((tab) => {
+    // Filter based on permissions - if nav item doesn't exist, user doesn't have permission
+    const navItem = navIndex[tab.id];
+    return navItem !== undefined;
+  });
+
+  // Create pageNav structure following the same pattern as useNotificationConfigNav
+  // Keep "Alert Activity" as the pageNav (not the active tab) so the title and subtitle stay consistent
+  // The tabs are children, and the breadcrumb utility will add the active tab to breadcrumbs
+  // (including the first tab, after our fix to the breadcrumb utility)
+  const pageNav: NavModelItem = {
+    ...alertActivityNav,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    children: allTabs as NavModelItem[],
+  };
+
+  return {
+    navId: 'alert-activity',
+    pageNav,
+  };
+}

public/app/features/alerting/unified/navigation/useAlertRulesNav.test.tsx

@@ -0,0 +1,123 @@
+import { renderHook } from '@testing-library/react';
+import { getWrapper } from 'test/test-utils';
+
+import { config } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { useAlertRulesNav } from './useAlertRulesNav';
+
+describe('useAlertRulesNav', () => {
+  const mockNavIndex = {
+    'alert-rules': {
+      id: 'alert-rules',
+      text: 'Alert rules',
+      url: '/alerting/list',
+      icon: 'list-ul',
+    },
+    'alert-rules-list': {
+      id: 'alert-rules-list',
+      text: 'Alert rules',
+      url: '/alerting/list',
+    },
+    'alert-rules-recently-deleted': {
+      id: 'alert-rules-recently-deleted',
+      text: 'Recently deleted',
+      url: '/alerting/recently-deleted',
+    },
+    'alert-list': {
+      id: 'alert-list',
+      text: 'Alert rules',
+      url: '/alerting/list',
+    },
+  };
+
+  const defaultPreloadedState = {
+    navIndex: mockNavIndex,
+  };
+
+  beforeEach(() => {
+    config.featureToggles.alertingNavigationV2 = false;
+  });
+
+  it('should return legacy navId when feature flag is off', () => {
+    const wrapper = getWrapper({
+      preloadedState: defaultPreloadedState,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/list'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertRulesNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alert-list');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+
+  it('should return V2 navigation when feature flag is on', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/list'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertRulesNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alert-rules');
+    expect(result.current.pageNav).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.length).toBeGreaterThan(0);
+  });
+
+  it('should filter tabs based on permissions', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const limitedNavIndex = {
+      'alert-rules': mockNavIndex['alert-rules'],
+      'alert-rules-list': mockNavIndex['alert-rules-list'],
+      // Missing 'alert-rules-recently-deleted' - user doesn't have permission
+    };
+    const store = configureStore({
+      navIndex: limitedNavIndex,
+    });
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/list'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertRulesNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.length).toBe(1);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.[0].id).toBe('alert-rules-list');
+  });
+
+  it('should set active tab based on current path', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/recently-deleted'],
+      },
+    });
+
+    const { result } = renderHook(() => useAlertRulesNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const recentlyDeletedTab = result.current.pageNav?.children?.find(
+      (tab) => tab.id === 'alert-rules-recently-deleted'
+    );
+    expect(recentlyDeletedTab?.active).toBe(true);
+  });
+});

public/app/features/alerting/unified/navigation/useAlertRulesNav.ts

@@ -0,0 +1,66 @@
+import { useLocation } from 'react-router-dom-v5-compat';
+
+import { NavModelItem } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { useSelector } from 'app/types/store';
+
+import { shouldUseAlertingNavigationV2 } from '../featureToggles';
+
+export function useAlertRulesNav() {
+  const location = useLocation();
+  const navIndex = useSelector((state) => state.navIndex);
+  const useV2Nav = shouldUseAlertingNavigationV2();
+
+  // If V2 navigation is not enabled, return legacy navId
+  if (!useV2Nav) {
+    return {
+      navId: 'alert-list',
+      pageNav: undefined,
+    };
+  }
+
+  const alertRulesNav = navIndex['alert-rules'];
+  if (!alertRulesNav) {
+    // Fallback to legacy if V2 nav doesn't exist
+    return {
+      navId: 'alert-list',
+      pageNav: undefined,
+    };
+  }
+
+  // All available tabs
+  const allTabs = [
+    {
+      id: 'alert-rules-list',
+      text: t('alerting.navigation.alert-rules', 'Alert rules'),
+      url: '/alerting/list',
+      active: location.pathname === '/alerting/list',
+      icon: 'list-ul',
+      parentItem: alertRulesNav,
+    },
+    {
+      id: 'alert-rules-recently-deleted',
+      text: t('alerting.navigation.recently-deleted', 'Recently deleted'),
+      url: '/alerting/recently-deleted',
+      active: location.pathname === '/alerting/recently-deleted',
+      icon: 'trash-alt',
+      parentItem: alertRulesNav,
+    },
+  ].filter((tab) => {
+    // Filter based on permissions - if nav item doesn't exist, user doesn't have permission
+    const navItem = navIndex[tab.id];
+    return navItem !== undefined;
+  });
+
+  // Create pageNav that represents the Alert rules page with tabs as children
+  const pageNav: NavModelItem = {
+    ...alertRulesNav,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    children: allTabs as NavModelItem[],
+  };
+
+  return {
+    navId: 'alert-rules',
+    pageNav,
+  };
+}

public/app/features/alerting/unified/navigation/useInsightsNav.test.tsx

@@ -0,0 +1,118 @@
+import { renderHook } from '@testing-library/react';
+import { getWrapper } from 'test/test-utils';
+
+import { config } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { useInsightsNav } from './useInsightsNav';
+
+describe('useInsightsNav', () => {
+  const mockNavIndex = {
+    insights: {
+      id: 'insights',
+      text: 'Insights',
+      url: '/alerting/insights',
+    },
+    'insights-system': {
+      id: 'insights-system',
+      text: 'System Insights',
+      url: '/alerting/insights',
+    },
+    'insights-history': {
+      id: 'insights-history',
+      text: 'Alert state history',
+      url: '/alerting/history',
+    },
+    'alerts-history': {
+      id: 'alerts-history',
+      text: 'History',
+      url: '/alerting/history',
+    },
+  };
+
+  const defaultPreloadedState = {
+    navIndex: mockNavIndex,
+  };
+
+  beforeEach(() => {
+    config.featureToggles.alertingNavigationV2 = false;
+  });
+
+  it('should return legacy navId when feature flag is off', () => {
+    const wrapper = getWrapper({
+      preloadedState: defaultPreloadedState,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/history'],
+      },
+    });
+
+    const { result } = renderHook(() => useInsightsNav(), { wrapper });
+
+    expect(result.current.navId).toBe('alerts-history');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+
+  it('should return V2 navigation when feature flag is on', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/insights'],
+      },
+    });
+
+    const { result } = renderHook(() => useInsightsNav(), { wrapper });
+
+    expect(result.current.navId).toBe('insights');
+    expect(result.current.pageNav).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children).toBeDefined();
+  });
+
+  it('should set active tab based on current path', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/history'],
+      },
+    });
+
+    const { result } = renderHook(() => useInsightsNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const historyTab = result.current.pageNav?.children?.find((tab) => tab.id === 'insights-history');
+    expect(historyTab?.active).toBe(true);
+  });
+
+  it('should filter tabs based on permissions', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const limitedNavIndex = {
+      insights: mockNavIndex.insights,
+      'insights-system': mockNavIndex['insights-system'],
+      // Missing 'insights-history' - user doesn't have permission
+    };
+    const store = configureStore({
+      navIndex: limitedNavIndex,
+    });
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/insights'],
+      },
+    });
+
+    const { result } = renderHook(() => useInsightsNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.length).toBe(1);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.[0].id).toBe('insights-system');
+  });
+});

public/app/features/alerting/unified/navigation/useInsightsNav.ts

@@ -0,0 +1,79 @@
+import { useLocation } from 'react-router-dom-v5-compat';
+
+import { NavModelItem } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { useSelector } from 'app/types/store';
+
+import { shouldUseAlertingNavigationV2 } from '../featureToggles';
+
+export function useInsightsNav() {
+  const location = useLocation();
+  const navIndex = useSelector((state) => state.navIndex);
+  const useV2Nav = shouldUseAlertingNavigationV2();
+
+  // If V2 navigation is not enabled, return legacy navId
+  if (!useV2Nav) {
+    if (location.pathname === '/alerting/history') {
+      return {
+        navId: 'alerts-history',
+        pageNav: undefined,
+      };
+    }
+    // For insights page, it doesn't exist in legacy, so return undefined
+    return {
+      navId: undefined,
+      pageNav: undefined,
+    };
+  }
+
+  const insightsNav = navIndex.insights;
+  if (!insightsNav) {
+    // Fallback to legacy
+    if (location.pathname === '/alerting/history') {
+      return {
+        navId: 'alerts-history',
+        pageNav: undefined,
+      };
+    }
+    return {
+      navId: undefined,
+      pageNav: undefined,
+    };
+  }
+
+  // All available tabs
+  const allTabs = [
+    {
+      id: 'insights-system',
+      text: t('alerting.navigation.system-insights', 'System Insights'),
+      url: '/alerting/insights',
+      active: location.pathname === '/alerting/insights',
+      icon: 'chart-line',
+      parentItem: insightsNav,
+    },
+    {
+      id: 'insights-history',
+      text: t('alerting.navigation.alert-state-history', 'Alert state history'),
+      url: '/alerting/history',
+      active: location.pathname === '/alerting/history',
+      icon: 'history',
+      parentItem: insightsNav,
+    },
+  ].filter((tab) => {
+    // Filter based on permissions - if nav item doesn't exist, user doesn't have permission
+    const navItem = navIndex[tab.id];
+    return navItem !== undefined;
+  });
+
+  // Create pageNav that represents the Insights page with tabs as children
+  const pageNav: NavModelItem = {
+    ...insightsNav,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    children: allTabs as NavModelItem[],
+  };
+
+  return {
+    navId: 'insights',
+    pageNav,
+  };
+}

public/app/features/alerting/unified/navigation/useNotificationConfigNav.test.tsx

@@ -0,0 +1,135 @@
+import { renderHook } from '@testing-library/react';
+import { getWrapper } from 'test/test-utils';
+
+import { config } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { useNotificationConfigNav } from './useNotificationConfigNav';
+
+describe('useNotificationConfigNav', () => {
+  const mockNavIndex = {
+    'notification-config': {
+      id: 'notification-config',
+      text: 'Notification configuration',
+      url: '/alerting/notifications',
+    },
+    'notification-config-contact-points': {
+      id: 'notification-config-contact-points',
+      text: 'Contact points',
+      url: '/alerting/notifications',
+    },
+    'notification-config-policies': {
+      id: 'notification-config-policies',
+      text: 'Notification policies',
+      url: '/alerting/routes',
+    },
+    'notification-config-templates': {
+      id: 'notification-config-templates',
+      text: 'Notification templates',
+      url: '/alerting/notifications/templates',
+    },
+    'notification-config-time-intervals': {
+      id: 'notification-config-time-intervals',
+      text: 'Time intervals',
+      url: '/alerting/routes?tab=time_intervals',
+    },
+    receivers: {
+      id: 'receivers',
+      text: 'Contact points',
+      url: '/alerting/notifications',
+    },
+    'am-routes': {
+      id: 'am-routes',
+      text: 'Notification policies',
+      url: '/alerting/routes',
+    },
+  };
+
+  const defaultPreloadedState = {
+    navIndex: mockNavIndex,
+  };
+
+  beforeEach(() => {
+    config.featureToggles.alertingNavigationV2 = false;
+  });
+
+  it('should return legacy navId when feature flag is off', () => {
+    const wrapper = getWrapper({
+      preloadedState: defaultPreloadedState,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/notifications'],
+      },
+    });
+
+    const { result } = renderHook(() => useNotificationConfigNav(), { wrapper });
+
+    expect(result.current.navId).toBe('receivers');
+    expect(result.current.pageNav).toBeUndefined();
+  });
+
+  it('should return V2 navigation when feature flag is on', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/notifications'],
+      },
+    });
+
+    const { result } = renderHook(() => useNotificationConfigNav(), { wrapper });
+
+    expect(result.current.navId).toBe('notification-config');
+    expect(result.current.pageNav).toBeDefined();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children).toBeDefined();
+  });
+
+  it('should detect time intervals tab from V2 path', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const store = configureStore(defaultPreloadedState);
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/time-intervals'],
+      },
+    });
+
+    const { result } = renderHook(() => useNotificationConfigNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const timeIntervalsTab = result.current.pageNav?.children?.find(
+      (tab) => tab.id === 'notification-config-time-intervals'
+    );
+    expect(timeIntervalsTab?.active).toBe(true);
+  });
+
+  it('should filter tabs based on permissions', () => {
+    config.featureToggles.alertingNavigationV2 = true;
+    const limitedNavIndex = {
+      'notification-config': mockNavIndex['notification-config'],
+      'notification-config-contact-points': mockNavIndex['notification-config-contact-points'],
+      // Missing other tabs - user doesn't have permission
+    };
+    const store = configureStore({
+      navIndex: limitedNavIndex,
+    });
+    const wrapper = getWrapper({
+      store,
+      renderWithRouter: true,
+      historyOptions: {
+        initialEntries: ['/alerting/notifications'],
+      },
+    });
+
+    const { result } = renderHook(() => useNotificationConfigNav(), { wrapper });
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.length).toBe(1);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(result.current.pageNav?.children?.[0].id).toBe('notification-config-contact-points');
+  });
+});

public/app/features/alerting/unified/navigation/useNotificationConfigNav.ts

@@ -0,0 +1,112 @@
+import { useLocation } from 'react-router-dom-v5-compat';
+
+import { NavModelItem } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { useSelector } from 'app/types/store';
+
+import { shouldUseAlertingNavigationV2 } from '../featureToggles';
+
+export function useNotificationConfigNav() {
+  const location = useLocation();
+  const navIndex = useSelector((state) => state.navIndex);
+  const useV2Nav = shouldUseAlertingNavigationV2();
+
+  // If V2 navigation is not enabled, return legacy navId based on current path
+  if (!useV2Nav) {
+    if (location.pathname.includes('/alerting/notifications/templates')) {
+      return {
+        navId: 'receivers',
+        pageNav: undefined,
+      };
+    }
+    if (location.pathname === '/alerting/routes') {
+      return {
+        navId: 'am-routes',
+        pageNav: undefined,
+      };
+    }
+    return {
+      navId: 'receivers',
+      pageNav: undefined,
+    };
+  }
+
+  const notificationConfigNav = navIndex['notification-config'];
+  if (!notificationConfigNav) {
+    // Fallback to legacy navIds
+    if (location.pathname.includes('/alerting/notifications/templates')) {
+      return {
+        navId: 'receivers',
+        pageNav: undefined,
+      };
+    }
+    if (location.pathname === '/alerting/routes') {
+      return {
+        navId: 'am-routes',
+        pageNav: undefined,
+      };
+    }
+    return {
+      navId: 'receivers',
+      pageNav: undefined,
+    };
+  }
+
+  // Check if we're on the time intervals page
+  // In V2 mode, check for dedicated route; in legacy mode, check for query param
+  const isTimeIntervalsTab = useV2Nav
+    ? location.pathname === '/alerting/time-intervals'
+    : location.pathname === '/alerting/routes' && location.search.includes('tab=time_intervals');
+
+  // All available tabs
+  const allTabs = [
+    {
+      id: 'notification-config-contact-points',
+      text: t('alerting.navigation.contact-points', 'Contact points'),
+      url: '/alerting/notifications',
+      active: location.pathname === '/alerting/notifications' && !location.pathname.includes('/templates'),
+      icon: 'comment-alt-share',
+      parentItem: notificationConfigNav,
+    },
+    {
+      id: 'notification-config-policies',
+      text: t('alerting.navigation.notification-policies', 'Notification policies'),
+      url: '/alerting/routes',
+      active: location.pathname === '/alerting/routes' && !isTimeIntervalsTab,
+      icon: 'sitemap',
+      parentItem: notificationConfigNav,
+    },
+    {
+      id: 'notification-config-templates',
+      text: t('alerting.navigation.notification-templates', 'Notification templates'),
+      url: '/alerting/notifications/templates',
+      active: location.pathname.includes('/alerting/notifications/templates'),
+      icon: 'file-alt',
+      parentItem: notificationConfigNav,
+    },
+    {
+      id: 'notification-config-time-intervals',
+      text: t('alerting.navigation.time-intervals', 'Time intervals'),
+      url: useV2Nav ? '/alerting/time-intervals' : '/alerting/routes?tab=time_intervals',
+      active: isTimeIntervalsTab,
+      icon: 'clock-nine',
+      parentItem: notificationConfigNav,
+    },
+  ].filter((tab) => {
+    // Filter based on permissions - if nav item doesn't exist, user doesn't have permission
+    const navItem = navIndex[tab.id];
+    return navItem !== undefined;
+  });
+
+  // Create pageNav that represents the Notification configuration page with tabs as children
+  const pageNav: NavModelItem = {
+    ...notificationConfigNav,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    children: allTabs as NavModelItem[],
+  };
+
+  return {
+    navId: 'notification-config',
+    pageNav,
+  };
+}

public/app/features/alerting/unified/rule-list/RuleList.v1.tsx

@@ -20,6 +20,7 @@ import { shouldUsePrometheusRulesPrimary } from '../featureToggles';
 import { useCombinedRuleNamespaces } from '../hooks/useCombinedRuleNamespaces';
 import { useFilteredRules, useRulesFilter } from '../hooks/useFilteredRules';
 import { useUnifiedAlertingSelector } from '../hooks/useUnifiedAlertingSelector';
+import { useAlertRulesNav } from '../navigation/useAlertRulesNav';
 import { fetchAllPromAndRulerRulesAction, fetchAllPromRulesAction, fetchRulerRulesAction } from '../state/actions';
 import { RULE_LIST_POLL_INTERVAL_MS } from '../utils/constants';
 import { GRAFANA_RULES_SOURCE_NAME, getAllRulesSourceNames } from '../utils/datasource';
@@ -115,11 +116,14 @@ const RuleListV1 = () => {
 
   const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();
   const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);
+  const { navId, pageNav } = useAlertRulesNav();
+
   return (
     // We don't want to show the Loading... indicator for the whole page.
     // We show separate indicators for Grafana-managed and Cloud rules
     <AlertingPageWrapper
-      navId="alert-list"
+      navId={navId}
+      pageNav={pageNav}
       isLoading={false}
       renderTitle={(title) => <RuleListPageTitle title={title} />}
       actions={<RuleListActionButtons hasAlertRulesCreated={hasAlertRulesCreated} />}

public/app/features/alerting/unified/rule-list/RuleList.v2.tsx

@@ -13,6 +13,7 @@ import { useListViewMode } from '../components/rules/Filter/RulesViewModeSelecto
 import { AIAlertRuleButtonComponent } from '../enterprise-components/AI/AIGenAlertRuleButton/addAIAlertRuleButton';
 import { AlertingAction, useAlertingAbility } from '../hooks/useAbilities';
 import { useRulesFilter } from '../hooks/useFilteredRules';
+import { useAlertRulesNav } from '../navigation/useAlertRulesNav';
 
 import { FilterView } from './FilterView';
 import { GroupedView } from './GroupedView';
@@ -119,10 +120,12 @@ export function RuleListActions() {
 
 export default function RuleListPage() {
   const { isApplying } = useApplyDefaultSearch();
+  const { navId, pageNav } = useAlertRulesNav();
 
   return (
     <AlertingPageWrapper
-      navId="alert-list"
+      navId={navId}
+      pageNav={pageNav}
       renderTitle={(title) => <RuleListPageTitle title={title} />}
       isLoading={isApplying}
       actions={<RuleListActions />}

public/app/features/alerting/unified/triage/Triage.tsx

@@ -3,21 +3,15 @@ import { UrlSyncContextProvider } from '@grafana/scenes';
 import { withErrorBoundary } from '@grafana/ui';
 
 import { AlertingPageWrapper } from '../components/AlertingPageWrapper';
+import { useAlertActivityNav } from '../navigation/useAlertActivityNav';
 
 import { TriageScene, triageScene } from './scene/TriageScene';
 
 export const TriagePage = () => {
+  const { navId, pageNav } = useAlertActivityNav();
+
   return (
-    <AlertingPageWrapper
-      navId="alert-alerts"
-      subTitle={t(
-        'alerting.pages.triage.subtitle',
-        'See what is currently alerting and explore historical data to investigate current or past issues.'
-      )}
-      pageNav={{
-        text: t('alerting.pages.triage.title', 'Alerts'),
-      }}
-    >
+    <AlertingPageWrapper navId={navId || 'alert-alerts'} pageNav={pageNav}>
       <UrlSyncContextProvider scene={triageScene} updateUrlOnInit={true} createBrowserHistorySteps={true}>
         <TriageScene key={triageScene.state.key} />
       </UrlSyncContextProvider>