From 8ade848a319a98fc97651cb4933a4cbb06e664d7 Mon Sep 17 00:00:00 2001
From: michaelmkraus <michael.m.kraus@deutschebahn.com>
Date: Tue, 15 Apr 2025 10:53:22 +0200
Subject: [PATCH 1/4] feat: enable text of navigation-item to break into
 multiple lines

---
 .../src/components/navigation-item/model.ts   |  5 ++
 .../navigation-item/navigation-item.lite.tsx  |  1 +
 .../navigation-item/navigation-item.scss      |  9 +++
 .../navigation-item.component.html            |  1 +
 .../src/components/navigation-item/index.tsx  |  4 +-
 showcases/shared/navigation-item.json         | 64 +++++++++++++++++++
 .../navigation-item/NavigationItem.vue        |  1 +
 7 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts
index b3c456aed69d..8662fdf53b3f 100644
--- a/packages/components/src/components/navigation-item/model.ts
+++ b/packages/components/src/components/navigation-item/model.ts
@@ -35,6 +35,11 @@ export type DBNavigationItemDefaultProps = {
 	 * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
 	 */
 	subNavigationExpanded?: boolean | string;
+
+	/**
+	 * Determines whether the text should wrap when its parent container is too small, preventing overflow.
+	 */
+	wrap?: boolean | string;
 };
 
 export type DBNavigationItemProps = DBNavigationItemDefaultProps &
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 65cc7a8f9952..a095304a5461 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -116,6 +116,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			data-icon={props.icon}
 			data-hide-icon={getHideProp(props.showIcon)}
 			data-active={props.active}
+			data-wrap={getBooleanAsString(props.wrap)}
 			aria-disabled={getBooleanAsString(props.disabled)}>
 			<Show when={!state.hasSubNavigation}>
 				<Show when={props.text} else={props.children}>
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index ca95a8f472fc..1539945b6a1b 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -87,6 +87,15 @@
 	position: relative;
 	inline-size: auto;
 
+	&[data-wrap="true"] {
+		.db-navigation-item-expand-button {
+			&:is(button) {
+				white-space: normal;
+				text-align: start;
+			}
+		}
+	}
+
 	@include screen-sizes.screen("md", "max") {
 		&:not([data-width="full"]) {
 			.db-navigation-item-expand-button {
diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
index e9e2f59b230f..d77790b35f0a 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
@@ -17,6 +17,7 @@
 				[width]="exampleProps?.width"
 				[disabled]="exampleProps?.disabled"
 				[active]="exampleProps?.active"
+				[wrap]="exampleProps?.wrap"
 				(click)="showAlert(exampleName)"
 			>
 				<ng-container *dbNavigationContent>
diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx
index a5405f26d895..f53d138968a3 100644
--- a/showcases/react-showcase/src/components/navigation-item/index.tsx
+++ b/showcases/react-showcase/src/components/navigation-item/index.tsx
@@ -12,7 +12,8 @@ const getNavigationItem = ({
 	active,
 	width,
 	areaPopup,
-	showIcon
+	showIcon,
+	wrap
 }: DBNavigationItemProps & { areaPopup: boolean }) => (
 	<ul className="nav-item-list">
 		<DBNavigationItem
@@ -25,6 +26,7 @@ const getNavigationItem = ({
 				alert(children.toString());
 			}}
 			showIcon={showIcon}
+			wrap={wrap}
 			subNavigation={
 				areaPopup && (
 					<ul>
diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json
index 7a83347cdac8..3b04ecce3f1a 100644
--- a/showcases/shared/navigation-item.json
+++ b/showcases/shared/navigation-item.json
@@ -234,5 +234,69 @@
 				]
 			}
 		]
+	},
+	{
+		"name": "Wrap",
+		"examples": [
+			{
+				"name": "No Wrap (Default)",
+				"props": {
+					"areaPopup": true
+				},
+				"children": [
+					{
+						"name": "a",
+						"native": true,
+						"props": {
+							"href": "#"
+						},
+						"content": "True"
+					}
+				]
+			},
+			{
+				"name": "This is a very long text that is broken into multiple lines.",
+				"props": {
+					"areaPopup": true,
+					"icon": "x_placeholder",
+					"showIcon": true,
+					"wrap": true
+				},
+				"style": {
+					"width": "200px"
+				},
+				"children": [
+					{
+						"name": "a",
+						"native": true,
+						"props": {
+							"href": "#"
+						},
+						"content": "True"
+					}
+				]
+			},
+			{
+				"name": "This is a very long text that is broken into multiple lines.",
+				"props": {
+					"areaPopup": true,
+					"wrap": true
+				},
+				"style": {
+					"width": "200px"
+				},
+				"slot": "sub-navigation",
+				"children": [
+					{
+						"name": "a",
+						"native": true,
+						"props": {
+							"href": "#"
+						},
+						"content": "True"
+					}
+				]
+			}
+		]
 	}
 ]
diff --git a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
index afb63c120614..4be757042b97 100644
--- a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
+++ b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
@@ -25,6 +25,7 @@ const log = (exampleName?: string) => {
 					:disabled="exampleProps?.disabled"
 					:active="exampleProps?.active"
 					:areaPopup="exampleProps?.areaPopup"
+					:wrap="exampleProps?.wrap"
 					@click="log(exampleName)"
 				>
 					<template v-if="exampleProps?.areaPopup" #sub-navigation>

From bfa051b2323cf16a06396c29f8a64a639bf0f215 Mon Sep 17 00:00:00 2001
From: michaelmkraus <michael.m.kraus@deutschebahn.com>
Date: Tue, 15 Apr 2025 11:17:34 +0200
Subject: [PATCH 2/4] test: updated snapshots

---
 ...vigationItem-should-have-same-aria-snapshot.yaml | 13 ++++++++++++-
 ...vigationItem-should-have-same-aria-snapshot.yaml | 13 ++++++++++++-
 ...vigationItem-should-have-same-aria-snapshot.yaml | 12 +++++++++++-
 ...vigationItem-should-have-same-aria-snapshot.yaml | 13 ++++++++++++-
 ...vigationItem-should-have-same-aria-snapshot.yaml | 13 ++++++++++++-
 ...vigationItem-should-have-same-aria-snapshot.yaml | 13 ++++++++++++-
 6 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index f7d334e6acf5..c4a8f9def558 100644
--- a/__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -45,4 +45,15 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - text: x_placeholder" / "
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file
diff --git a/__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index f7d334e6acf5..c4a8f9def558 100644
--- a/__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -45,4 +45,15 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - text: x_placeholder" / "
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file
diff --git a/__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index 850e6106b6c7..4860b728808c 100644
--- a/__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -44,4 +44,14 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file
diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index f7d334e6acf5..c4a8f9def558 100644
--- a/__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -45,4 +45,15 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - text: x_placeholder" / "
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file
diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index f7d334e6acf5..c4a8f9def558 100644
--- a/__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -45,4 +45,15 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - text: x_placeholder" / "
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file
diff --git a/__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml b/__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
index f7d334e6acf5..c4a8f9def558 100644
--- a/__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
@@ -45,4 +45,15 @@
       - link "(Default) Auto"
   - list:
     - listitem:
-      - link "Full"
\ No newline at end of file
+      - link "Full"
+  - link "Wrap arrow_up_right\" / \""
+  - list:
+    - listitem:
+      - button "No Wrap (Default) chevron_right\" / \""
+  - list:
+    - listitem:
+      - text: x_placeholder" / "
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
+  - list:
+    - listitem:
+      - button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
\ No newline at end of file

From 48af3a23bb1c9e4d62546c9344e97418271340d5 Mon Sep 17 00:00:00 2001
From: michaelmkraus <michael.m.kraus@deutschebahn.com>
Date: Tue, 15 Apr 2025 14:10:07 +0200
Subject: [PATCH 3/4] feat: add icons to subnavigation-items for showcases

---
 .../navigation-item.component.html                | 15 ++++++++++++---
 .../src/components/navigation-item/index.tsx      |  4 ++--
 showcases/shared/navigation-item.json             |  4 +++-
 .../components/navigation-item/NavigationItem.vue |  6 ++++++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
index d77790b35f0a..5665e864b70e 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
@@ -32,17 +32,26 @@
 				@if (exampleProps?.areaPopup) {
 					<ng-container sub-navigation>
 						<ul>
-							<db-navigation-item>
+							<db-navigation-item
+								[icon]="exampleProps?.icon"
+								[showIcon]="exampleProps?.showIcon"
+							>
 								<ng-container *dbNavigationContent>
 									<a href="#">Test1</a>
 								</ng-container>
 							</db-navigation-item>
-							<db-navigation-item>
+							<db-navigation-item
+								[icon]="exampleProps?.icon"
+								[showIcon]="exampleProps?.showIcon"
+							>
 								<ng-container *dbNavigationContent>
 									<a href="#">Test2</a>
 								</ng-container>
 							</db-navigation-item>
-							<db-navigation-item>
+							<db-navigation-item
+								[icon]="exampleProps?.icon"
+								[showIcon]="exampleProps?.showIcon"
+							>
 								<ng-container *dbNavigationContent>
 									<a href="#">Test3</a>
 								</ng-container>
diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx
index f53d138968a3..ce1adda3b7f2 100644
--- a/showcases/react-showcase/src/components/navigation-item/index.tsx
+++ b/showcases/react-showcase/src/components/navigation-item/index.tsx
@@ -30,10 +30,10 @@ const getNavigationItem = ({
 			subNavigation={
 				areaPopup && (
 					<ul>
-						<DBNavigationItem>
+						<DBNavigationItem icon={icon} showIcon={showIcon}>
 							<a href="#">Test1</a>
 						</DBNavigationItem>
-						<DBNavigationItem>
+						<DBNavigationItem icon={icon} showIcon={showIcon}>
 							<a href="#">Test2</a>
 						</DBNavigationItem>
 					</ul>
diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json
index 3b04ecce3f1a..09ea179c47f9 100644
--- a/showcases/shared/navigation-item.json
+++ b/showcases/shared/navigation-item.json
@@ -270,7 +270,9 @@
 						"name": "a",
 						"native": true,
 						"props": {
-							"href": "#"
+							"href": "#",
+							"icon": "x_placeholder",
+							"showIcon": true
 						},
 						"content": "True"
 					}
diff --git a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
index 4be757042b97..73b3e756fb14 100644
--- a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
+++ b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
@@ -31,12 +31,18 @@ const log = (exampleName?: string) => {
 					<template v-if="exampleProps?.areaPopup" #sub-navigation>
 						<ul>
 							<DBNavigationItem
+								:icon="exampleProps?.icon"
+								:showIcon="exampleProps?.showIcon"
 								><a href="#">Test1</a></DBNavigationItem
 							>
 							<DBNavigationItem
+								:icon="exampleProps?.icon"
+								:showIcon="exampleProps?.showIcon"
 								><a href="#">Test2</a></DBNavigationItem
 							>
 							<DBNavigationItem
+								:icon="exampleProps?.icon"
+								:showIcon="exampleProps?.showIcon"
 								><a href="#">Test3</a></DBNavigationItem
 							>
 						</ul>

From b2998be266fd80cdfefbe44e9a335a0fe2de8786 Mon Sep 17 00:00:00 2001
From: michaelmkraus <michael.m.kraus@deutschebahn.com>
Date: Tue, 15 Apr 2025 14:19:53 +0200
Subject: [PATCH 4/4] fix: removed ul from subnavigation causing incorrect
 padding at start of the items

---
 .../navigation-item.component.html            | 50 +++++++++----------
 .../src/components/navigation-item/index.tsx  |  4 +-
 .../navigation-item/NavigationItem.vue        | 32 ++++++------
 3 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
index 5665e864b70e..c3541f9ece35 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
@@ -31,32 +31,30 @@
 
 				@if (exampleProps?.areaPopup) {
 					<ng-container sub-navigation>
-						<ul>
-							<db-navigation-item
-								[icon]="exampleProps?.icon"
-								[showIcon]="exampleProps?.showIcon"
-							>
-								<ng-container *dbNavigationContent>
-									<a href="#">Test1</a>
-								</ng-container>
-							</db-navigation-item>
-							<db-navigation-item
-								[icon]="exampleProps?.icon"
-								[showIcon]="exampleProps?.showIcon"
-							>
-								<ng-container *dbNavigationContent>
-									<a href="#">Test2</a>
-								</ng-container>
-							</db-navigation-item>
-							<db-navigation-item
-								[icon]="exampleProps?.icon"
-								[showIcon]="exampleProps?.showIcon"
-							>
-								<ng-container *dbNavigationContent>
-									<a href="#">Test3</a>
-								</ng-container>
-							</db-navigation-item>
-						</ul>
+						<db-navigation-item
+							[icon]="exampleProps?.icon"
+							[showIcon]="exampleProps?.showIcon"
+						>
+							<ng-container *dbNavigationContent>
+								<a href="#">Test1</a>
+							</ng-container>
+						</db-navigation-item>
+						<db-navigation-item
+							[icon]="exampleProps?.icon"
+							[showIcon]="exampleProps?.showIcon"
+						>
+							<ng-container *dbNavigationContent>
+								<a href="#">Test2</a>
+							</ng-container>
+						</db-navigation-item>
+						<db-navigation-item
+							[icon]="exampleProps?.icon"
+							[showIcon]="exampleProps?.showIcon"
+						>
+							<ng-container *dbNavigationContent>
+								<a href="#">Test3</a>
+							</ng-container>
+						</db-navigation-item>
 					</ng-container>
 				}
 			</db-navigation-item>
diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx
index ce1adda3b7f2..5870ce7967df 100644
--- a/showcases/react-showcase/src/components/navigation-item/index.tsx
+++ b/showcases/react-showcase/src/components/navigation-item/index.tsx
@@ -29,14 +29,14 @@ const getNavigationItem = ({
 			wrap={wrap}
 			subNavigation={
 				areaPopup && (
-					<ul>
+					<>
 						<DBNavigationItem icon={icon} showIcon={showIcon}>
 							<a href="#">Test1</a>
 						</DBNavigationItem>
 						<DBNavigationItem icon={icon} showIcon={showIcon}>
 							<a href="#">Test2</a>
 						</DBNavigationItem>
-					</ul>
+					</>
 				)
 			}>
 			{areaPopup ? children : <a href="#">{children}</a>}
diff --git a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
index 73b3e756fb14..8cd5a3288c04 100644
--- a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
+++ b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
@@ -29,23 +29,21 @@ const log = (exampleName?: string) => {
 					@click="log(exampleName)"
 				>
 					<template v-if="exampleProps?.areaPopup" #sub-navigation>
-						<ul>
-							<DBNavigationItem
-								:icon="exampleProps?.icon"
-								:showIcon="exampleProps?.showIcon"
-								><a href="#">Test1</a></DBNavigationItem
-							>
-							<DBNavigationItem
-								:icon="exampleProps?.icon"
-								:showIcon="exampleProps?.showIcon"
-								><a href="#">Test2</a></DBNavigationItem
-							>
-							<DBNavigationItem
-								:icon="exampleProps?.icon"
-								:showIcon="exampleProps?.showIcon"
-								><a href="#">Test3</a></DBNavigationItem
-							>
-						</ul>
+						<DBNavigationItem
+							:icon="exampleProps?.icon"
+							:showIcon="exampleProps?.showIcon"
+							><a href="#">Test1</a></DBNavigationItem
+						>
+						<DBNavigationItem
+							:icon="exampleProps?.icon"
+							:showIcon="exampleProps?.showIcon"
+							><a href="#">Test2</a></DBNavigationItem
+						>
+						<DBNavigationItem
+							:icon="exampleProps?.icon"
+							:showIcon="exampleProps?.showIcon"
+							><a href="#">Test3</a></DBNavigationItem
+						>
 					</template>
 					<template v-if="exampleProps?.areaPopup">
 						{{ exampleName }}