diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard.model.ts
index bb1509adb1..f28ae9d63d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard.model.ts
@@ -10,7 +10,12 @@ export interface ManifestDashboard
 
 export interface MetaDashboard {
 	/**
-	 * This is the URL path for the dashboard which is used for navigating or deep linking directly to the dashboard
+	 * The displayed name (label) in the navigation.
+	 */
+	label?: string;
+
+	/**
+	 * This is the URL path part for this view. This is used for navigating or deep linking directly to the dashboard
 	 * https://yoursite.com/section/settings/dashboard/my-dashboard-path
 	 *
 	 * @example my-dashboard-path
@@ -18,12 +23,7 @@ export interface MetaDashboard {
 	 *  "my-dashboard-path"
 	 * ]
 	 */
-	pathname: string;
-
-	/**
-	 * The displayed name (label) for the tab of the dashboard
-	 */
-	label?: string;
+	pathname?: string;
 }
 
 export interface ConditionsDashboard {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/section-view.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/section-view.model.ts
index 41cedf109c..b06140d888 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/section-view.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/section-view.model.ts
@@ -9,8 +9,29 @@ export interface ManifestSectionView
 }
 
 export interface MetaSectionView {
-	label: string;
-	pathname: string;
+	/**
+	 * The displayed name (label) in the navigation.
+	 */
+	label?: string;
+
+	/**
+	 * This is the URL path part for this view. This is used for navigating or deep linking directly to the view
+	 * https://yoursite.com/section/settings/view/my-view-path
+	 *
+	 * @example my-view-path
+	 * @examples [
+	 *  "my-view-path"
+	 * ]
+	 */
+	pathname?: string;
+
+	/**
+	 * The icon displayed for this view in the navigation.
+	 * @example "box"
+	 * @examples [
+	 *  "box"
+	 * ]
+	 */
 	icon: string;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
index a72920c3d1..caca3f5d0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
@@ -13,6 +13,7 @@ import {
 import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 // TODO: this might need a new name, since it's both view and dashboard now
 @customElement('umb-section-views')
@@ -141,16 +142,17 @@ export class UmbSectionViewsElement extends UmbLitElement {
 		return this._dashboards.length > 0
 			? html`
 					<uui-tab-group slot="header" id="dashboards">
-						${this._dashboards.map(
-							(dashboard) => html`
+						${this._dashboards.map((dashboard) => {
+							const dashboardName = dashboard.meta.label ?? dashboard.name;
+							const dashboardPath =
+								'dashboard/' + dashboard.meta.pathname ? dashboard.meta.pathname : umbracoPath(dashboardName);
+							return html`
 								<uui-tab
-									.label="${dashboard.meta.label || dashboard.name}"
-									href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
-									?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
-									${dashboard.meta.label || dashboard.name}
-								</uui-tab>
-							`
-						)}
+									.label="${dashboardName}"
+									href="${this._routerPath}/${dashboardPath}"
+									?active="${this._activePath === dashboardPath}"></uui-tab>
+							`;
+						})}
 					</uui-tab-group>
 			  `
 			: '';
@@ -160,17 +162,19 @@ export class UmbSectionViewsElement extends UmbLitElement {
 		return this._views.length > 0
 			? html`
 					<uui-tab-group slot="navigation" id="views">
-						${this._views.map(
-							(view) => html`
+						${this._views.map((view) => {
+							const viewName = view.meta.label ?? view.name;
+							const viewPath = 'view/' + view.meta.pathname ? view.meta.pathname : umbracoPath(viewName);
+							return html`
 								<uui-tab
-									.label="${view.meta.label || view.name}"
-									href="${this._routerPath}/view/${view.meta.pathname}"
-									?active="${this._activePath === 'view/' + view.meta.pathname}">
+									.label="${viewName}"
+									href="${this._routerPath}/${viewPath}"
+									?active="${this._activePath === viewPath}">
 									<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
-									${view.meta.label || view.name}
+									${viewName}
 								</uui-tab>
-							`
-						)}
+							`;
+						})}
 					</uui-tab-group>
 			  `
 			: '';