diff --git a/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte b/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte
new file mode 100644
index 000000000..cf57fe369
--- /dev/null
+++ b/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
diff --git a/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
new file mode 100644
index 000000000..03edd4660
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { DashboardNav } from "..";
+import { mdiPlusBoxOutline, mdiSwapHorizontal, mdiTimerSand } from "@mdi/js";
+
+describe("DashboardNav", () => {
+ const baseProps = {
+ items: [
+ {
+ href: "#",
+ id: "item-1",
+ label: "Something",
+ },
+ {
+ href: "#",
+ icons: [],
+ id: "item-2",
+ label: "Send",
+ },
+ {
+ href: "#",
+ icons: [{ path: mdiTimerSand }],
+ id: "item-3",
+ label: "Receive",
+ },
+ {
+ href: "#",
+ icons: [
+ { path: mdiTimerSand },
+ { path: mdiSwapHorizontal },
+ { path: mdiPlusBoxOutline },
+ ],
+ id: "item-4",
+ label: "Stake",
+ },
+ ],
+ };
+ const baseOptions = {
+ props: baseProps,
+ target: document.body,
+ };
+
+ afterEach(cleanup);
+
+ it("renders the DashboardNav component", () => {
+ const { container } = render(DashboardNav, baseOptions);
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it("should pass additional class names and attributes to the rendered element", async () => {
+ const props = {
+ ...baseProps,
+ className: "foo bar",
+ };
+ const { container, rerender } = render(DashboardNav, {
+ ...baseOptions,
+ props,
+ });
+
+ expect(container.firstChild).toHaveClass("foo bar");
+
+ await rerender({
+ ...props,
+ className: "qux",
+ });
+
+ expect(container.firstChild).toHaveClass("qux");
+ });
+
+ it("should not display icons if the item's icons array is undefined", () => {
+ const { container } = render(DashboardNav, baseProps);
+
+ expect(
+ container.querySelector(
+ ".dashboard-nav-list > li:nth-child(1) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+ )
+ ).toBeNull();
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it("should not display icons if the item's icon array is empty", () => {
+ const { container } = render(DashboardNav, baseProps);
+
+ expect(
+ container.querySelector(
+ ".dashboard-nav-list > li:nth-child(2) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+ )
+ ).toBeNull();
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it("should display icons if the item's icon array is present", () => {
+ const { container } = render(DashboardNav, baseProps);
+
+ expect(
+ container.querySelector(
+ ".dashboard-nav-list > li:nth-child(3) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+ )
+ ).toBeTruthy();
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap
new file mode 100644
index 000000000..628a0a937
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap
@@ -0,0 +1,493 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DashboardNav > renders the DashboardNav component 1`] = `
+
+`;
+
+exports[`DashboardNav > should display icons if the item's icon array is present 1`] = `
+
+`;
+
+exports[`DashboardNav > should not display icons if the item's icon array is empty 1`] = `
+
+`;
+
+exports[`DashboardNav > should not display icons if the item's icons array is undefined 1`] = `
+
+`;
diff --git a/web-wallet/src/lib/components/components.d.ts b/web-wallet/src/lib/components/components.d.ts
new file mode 100644
index 000000000..28addedaa
--- /dev/null
+++ b/web-wallet/src/lib/components/components.d.ts
@@ -0,0 +1,10 @@
+type DashboardNavItem = {
+ href: string;
+ icons?: DashboardNavItemIconProp[];
+ id: string;
+ label: string;
+};
+
+type DashboardNavItemIconProp = {
+ path: string;
+};
diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js
index 8acf0b5a4..cb7aecd03 100644
--- a/web-wallet/src/lib/components/index.js
+++ b/web-wallet/src/lib/components/index.js
@@ -5,6 +5,7 @@ export { default as AppImage } from "./AppImage/AppImage.svelte";
export { default as Balance } from "./Balance/Balance.svelte";
export { default as ContractOperations } from "./ContractOperations/ContractOperations.svelte";
export { default as ContractStatusesList } from "./ContractStatusesList/ContractStatusesList.svelte";
+export { default as DashboardNav } from "./DashboardNav/DashboardNav.svelte";
export { default as ExistingWalletNotice } from "./ExistingWalletNotice/ExistingWalletNotice.svelte";
export { default as GasControls } from "./GasControls/GasControls.svelte";
export { default as GasFee } from "./GasFee/GasFee.svelte";
diff --git a/web-wallet/src/routes/components-showcase/+page.svelte b/web-wallet/src/routes/components-showcase/+page.svelte
index 719188735..a495767f3 100644
--- a/web-wallet/src/routes/components-showcase/+page.svelte
+++ b/web-wallet/src/routes/components-showcase/+page.svelte
@@ -8,6 +8,7 @@
import Buttons from "./Buttons.svelte";
import Cards from "./Cards.svelte";
import Checkboxes from "./Checkboxes.svelte";
+ import DashboardNavs from "./DashboardNavs.svelte";
import ExclusiveChoices from "./ExclusiveChoices.svelte";
import ProgressBars from "./ProgressBars.svelte";
import Selects from "./Selects.svelte";
@@ -28,6 +29,7 @@
Buttons: Buttons,
Cards: Cards,
Checkboxes: Checkboxes,
+ "Dashboard Navs": DashboardNavs,
"Exclusive Choices": ExclusiveChoices,
"Progress bars": ProgressBars,
Selects: Selects,
diff --git a/web-wallet/src/routes/components-showcase/DashboardNavs.svelte b/web-wallet/src/routes/components-showcase/DashboardNavs.svelte
new file mode 100644
index 000000000..89f28714d
--- /dev/null
+++ b/web-wallet/src/routes/components-showcase/DashboardNavs.svelte
@@ -0,0 +1,41 @@
+
+
+
+
+