diff --git a/.changeset/bright-cheetahs-thank.md b/.changeset/bright-cheetahs-thank.md
new file mode 100644
index 00000000000..b512f22ca80
--- /dev/null
+++ b/.changeset/bright-cheetahs-thank.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": minor
+---
+
+feat(core/menu): make behavior at breakpoint 'lg' configurable and change 'md' breakpoint menu icons
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
index 018da6ad421..05b4bc66976 100644
--- a/packages/angular/src/components.ts
+++ b/packages/angular/src/components.ts
@@ -1303,7 +1303,7 @@ export declare interface IxMapNavigationOverlay extends Components.IxMapNavigati
@ProxyCmp({
- inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+ inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'startExpanded'],
methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
})
@Component({
@@ -1311,7 +1311,7 @@ export declare interface IxMapNavigationOverlay extends Components.IxMapNavigati
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+ inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'startExpanded'],
})
export class IxMenu {
protected el: HTMLElement;
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 0e21c18fa6c..357411eaef3 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -9142,7 +9142,7 @@
"mutable": true,
"attr": "expand",
"reflectToAttr": true,
- "docs": "",
+ "docs": "Toggle the expand state of the menu",
"docsTags": [],
"default": "false",
"values": [
@@ -9378,6 +9378,28 @@
],
"optional": false,
"required": false
+ },
+ {
+ "name": "startExpanded",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "start-expanded",
+ "reflectToAttr": false,
+ "docs": "If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
}
],
"methods": [
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index f362d127075..3d1ec2de1a9 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1345,6 +1345,9 @@ export namespace Components {
* Show toggle between light and dark variant. Only if the provided theme have implemented both!
*/
"enableToggleTheme": boolean;
+ /**
+ * Toggle the expand state of the menu
+ */
"expand": boolean;
"i18nCollapse": string;
"i18nExpand": string;
@@ -1372,6 +1375,10 @@ export namespace Components {
* Is settings tab visible
*/
"showSettings": boolean;
+ /**
+ * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+ */
+ "startExpanded": boolean;
/**
* Toggle About tabs
* @param show
@@ -5421,6 +5428,9 @@ declare namespace LocalJSX {
* Show toggle between light and dark variant. Only if the provided theme have implemented both!
*/
"enableToggleTheme"?: boolean;
+ /**
+ * Toggle the expand state of the menu
+ */
"expand"?: boolean;
"i18nCollapse"?: string;
"i18nExpand"?: string;
@@ -5456,6 +5466,10 @@ declare namespace LocalJSX {
* Is settings tab visible
*/
"showSettings"?: boolean;
+ /**
+ * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+ */
+ "startExpanded"?: boolean;
}
interface IxMenuAbout {
/**
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index a62af1e7d84..b6d9a8bf60d 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -88,9 +88,15 @@ export class Menu {
@Prop() i18nExpandSidebar = 'Expand sidebar';
/**
+ * Toggle the expand state of the menu
*/
@Prop({ mutable: true, reflect: true }) expand = false;
+ /**
+ * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+ */
+ @Prop() startExpanded = false;
+
/**
* Menu stays pinned to the left
*/
@@ -293,7 +299,7 @@ export class Menu {
applicationLayoutService.onChange.on((breakpoint) =>
this.onBreakpointChange(breakpoint)
);
- this.onBreakpointChange(applicationLayoutService.breakpoint);
+ this.onBreakpointChange(applicationLayoutService.breakpoint, true);
}
componentWillRender() {
@@ -309,7 +315,7 @@ export class Menu {
menuController.setIsPinned(pinned);
}
- private onBreakpointChange(mode: Breakpoint) {
+ private onBreakpointChange(mode: Breakpoint, initial = false) {
if (!this.applicationLayoutContext && mode === 'sm') {
return;
}
@@ -325,16 +331,11 @@ export class Menu {
return;
}
- this.breakpoint = mode;
-
- if (this.breakpoint === 'lg') {
- this.setPinned(true);
- this.toggleMenu(true);
- return;
- }
+ this.setPinned(mode === 'lg');
+ if (initial || mode !== this.breakpoint)
+ this.toggleMenu(mode === 'lg' && this.startExpanded);
- this.setPinned(false);
- this.toggleMenu(false);
+ this.breakpoint = mode;
}
private appendFragments() {
@@ -609,7 +610,7 @@ export class Menu {
onClick={async () => this.toggleMenu()}
expanded={this.expand}
ixAriaLabel={this.i18nExpandSidebar}
- pinned={this.showPinned}
+ pinned={true}
class={{
'burger-menu': true,
}}
diff --git a/packages/core/src/components/menu/test/menu.ct.ts b/packages/core/src/components/menu/test/menu.ct.ts
index d05d32be23d..16aa6c76506 100644
--- a/packages/core/src/components/menu/test/menu.ct.ts
+++ b/packages/core/src/components/menu/test/menu.ct.ts
@@ -23,23 +23,62 @@ test('renders', async ({ mount, page }) => {
await expect(element).toHaveClass(/breakpoint-lg/);
});
-test('should stay close after menu click when NOT pinned', async ({
+test('should be open when start-expanded ist set', async ({ mount, page }) => {
+ await mount(`
+
+
+ Item
+
+
+ `);
+ await page
+ .locator('ix-application')
+ .evaluate(
+ (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['lg'])
+ );
+ const menu = page.locator('ix-menu');
+
+ await expect(menu).toHaveClass(/expanded/);
+});
+
+test('should be closed when start-expanded ist NOT set', async ({
mount,
page,
}) => {
await mount(`
-
+
Item
-
+
`);
+ await page
+ .locator('ix-application')
+ .evaluate(
+ (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['lg'])
+ );
const menu = page.locator('ix-menu');
+
+ await expect(menu).not.toHaveClass(/expanded/);
+});
+
+test('should be closed after menu click when NOT pinned', async ({
+ mount,
+ page,
+}) => {
+ await mount(`
+
+
+ Item
+
+
+ `);
await page
- .locator('ix-basic-navigation')
+ .locator('ix-application')
.evaluate(
(menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
);
+ const menu = page.locator('ix-menu');
const menuButton = menu.locator('ix-burger-menu');
await menuButton.click();
@@ -53,21 +92,24 @@ test('should stay open after menu click when pinned', async ({
page,
}) => {
await mount(`
-
+
Item
-
+
`);
+ await page
+ .locator('ix-application')
+ .evaluate(
+ (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
+ );
const menu = page.locator('ix-menu');
const menuButton = menu.locator('ix-burger-menu');
await menuButton.click();
- await expect(menu).not.toHaveClass(/expanded/);
-
+ await expect(menu).toHaveClass(/expanded/);
await page.locator('ix-menu-item').click();
-
- await expect(menu).not.toHaveClass(/expanded/);
+ await expect(menu).toHaveClass(/expanded/);
});
test('should open and close settings', async ({ mount, page }) => {
@@ -195,7 +237,10 @@ test('should close menu by bottom icon click', async ({ mount, page }) => {
`);
const element = page.locator('ix-menu');
- await element.getByRole('button', { name: 'Expand sidebar' }).click();
+
+ await page.locator('ix-menu ix-burger-menu').click();
+ await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
const innerMenu = element.locator('.menu');
await expect(innerMenu).toHaveClass(/expanded/);
diff --git a/packages/core/src/tests/application/application.e2e.ts b/packages/core/src/tests/application/application.e2e.ts
index 6680204a21a..fde1c501f90 100644
--- a/packages/core/src/tests/application/application.e2e.ts
+++ b/packages/core/src/tests/application/application.e2e.ts
@@ -16,6 +16,9 @@ regressionTest.describe('basic navigation large', () => {
await page.setViewportSize(viewPorts.lg);
await page.waitForTimeout(500);
+ await page.locator('ix-menu ix-burger-menu').click();
+ await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
await page.waitForTimeout(1000);
await expect(page).toHaveScreenshot({
@@ -29,6 +32,9 @@ regressionTest.describe('basic navigation large', () => {
await page.setViewportSize(viewPorts.lg);
await page.waitForTimeout(500);
+ await page.locator('ix-menu ix-burger-menu').click();
+ await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
await expect(page.getByText('Example content')).toBeVisible();
await page.waitForTimeout(1000);
@@ -44,7 +50,6 @@ regressionTest.describe('basic navigation', () => {
regressionTest('basic', async ({ page }) => {
await page.goto('application/basic');
await page.setViewportSize(viewPorts.md);
- await page.waitForTimeout(500);
await page.waitForTimeout(1000);
@@ -58,6 +63,7 @@ regressionTest.describe('basic navigation', () => {
await page.goto('application/content-width');
await page.setViewportSize(viewPorts.md);
await page.waitForTimeout(500);
+
await expect(page.getByText('Example content')).toBeVisible();
await page.waitForTimeout(1000);
@@ -94,8 +100,6 @@ regressionTest.describe('basic navigation mobile', () => {
await page.goto('application/mobile');
await page.setViewportSize(viewPorts.sm);
- await page.waitForTimeout(500);
-
await page.waitForTimeout(1000);
await expect(page).toHaveScreenshot({
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png
index 872d2201a8f..47ac59c197e 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png
index 83b0fabfa5b..5dc6d95e817 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png
index 872d2201a8f..47ac59c197e 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png
index 83b0fabfa5b..5dc6d95e817 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png
index 6935f418118..1ad69b6f37a 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png
index 0773b9b1c3a..9b7a0b6d5d8 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png
index 793e0514cfd..0967eadce1c 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png
index 00528887237..3edc014ee23 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png
index 793e0514cfd..0967eadce1c 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png
index 00528887237..3edc014ee23 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png
index 9b038510a78..4fad9865874 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png
index 8053e6c76d8..acbf18aa98f 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png
index 87b81c2fd72..65f274ffe8c 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png
index 05ade51193e..79ec0343df5 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/basic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/mobile/index.html b/packages/core/src/tests/application/mobile/index.html
index 2ccb58be442..311a97c31a3 100644
--- a/packages/core/src/tests/application/mobile/index.html
+++ b/packages/core/src/tests/application/mobile/index.html
@@ -25,7 +25,7 @@
justify-content: center;
align-items: center;
position: absolute;
- content: '🚧';
+ content: 'TEST';
border: 2px dashed #ff0000aa;
padding: 2rem;
font-size: 55px;
@@ -47,26 +47,28 @@
Test 1
Test 1
Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
- Test 1
+ Test 2
+ Test 3
+ Test 4
+ Test 5
+ Test 6
+ Test 7
+ Test 8
+ Test 9
+ Test 10
+ Test 11
+ Test 12
+ Test 13
+ Test 14
+ Test 15
+ Test 16
+ Test 17
+ Test 18
+ Test 19
+ Test 20
+ Test 21
+ Test 22
+ Test 23
Item 1
Item 1
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts
index 04d8e1e7e40..886cd13bc00 100644
--- a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts
+++ b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts
@@ -16,6 +16,9 @@ regressionTest.describe('basic navigation large', () => {
await page.setViewportSize(viewPorts.lg);
await page.waitForTimeout(500);
+ await page.locator('ix-menu ix-burger-menu').click();
+ await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
await page.waitForTimeout(1000);
expect(
@@ -28,6 +31,9 @@ regressionTest.describe('basic navigation large', () => {
await page.setViewportSize(viewPorts.lg);
await page.waitForTimeout(500);
+ await page.locator('ix-menu ix-burger-menu').click();
+ await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
await expect(page.getByText('Example content')).toBeVisible();
await page.waitForTimeout(1000);
@@ -42,7 +48,6 @@ regressionTest.describe('basic navigation', () => {
regressionTest('basic', async ({ page }) => {
await page.goto('basic-navigation/basic');
await page.setViewportSize(viewPorts.md);
- await page.waitForTimeout(500);
await page.waitForTimeout(1000);
@@ -55,6 +60,7 @@ regressionTest.describe('basic navigation', () => {
await page.goto('basic-navigation/content-width');
await page.setViewportSize(viewPorts.md);
await page.waitForTimeout(500);
+
await expect(page.getByText('Example content')).toBeVisible();
await page.waitForTimeout(1000);
@@ -89,8 +95,6 @@ regressionTest.describe('basic navigation mobile', () => {
await page.goto('basic-navigation/mobile');
await page.setViewportSize(viewPorts.sm);
- await page.waitForTimeout(500);
-
await page.waitForTimeout(1000);
expect(
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png
index 872d2201a8f..47ac59c197e 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png
index 83b0fabfa5b..5dc6d95e817 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png
index 872d2201a8f..47ac59c197e 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png
index 83b0fabfa5b..5dc6d95e817 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png
index 6935f418118..1ad69b6f37a 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png
index 0773b9b1c3a..9b7a0b6d5d8 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png
index 793e0514cfd..0967eadce1c 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png
index 00528887237..3edc014ee23 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png
index 793e0514cfd..0967eadce1c 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png
index 00528887237..3edc014ee23 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png
index b9052dd4c3f..4fad9865874 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png
index 4eeb8fe80cd..acbf18aa98f 100644
Binary files a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png
index 2954e3d7112..c78bc17ebc8 100644
Binary files a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png
index 8bdffcf6058..22d9704743e 100644
Binary files a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png
index f3532a61040..6daca258ecf 100644
Binary files a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png
index efd78462ab9..5f73131a36e 100644
Binary files a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png
index bd8b9e5ca2e..6156996765e 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png
index 465ca7cbfdb..a231d516603 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-dark-linux.png
index 9d85a49a926..3302e6e4127 100644
Binary files a/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-light-linux.png
index 3342736a66e..c0b4ed7f1ca 100644
Binary files a/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-about/menu-about.e2e.ts-snapshots/menu-about-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png
deleted file mode 100644
index 123a0c6e190..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png
deleted file mode 100644
index 320515dd592..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png
deleted file mode 100644
index f0c2b2666c1..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png
deleted file mode 100644
index 2b9b41ef24f..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png
deleted file mode 100644
index 98660d07acf..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png
deleted file mode 100644
index 7dc1389a4aa..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png
deleted file mode 100644
index 49bca93cd77..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png
deleted file mode 100644
index 55ff49fb564..00000000000
Binary files a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png and /dev/null differ
diff --git a/packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts
similarity index 100%
rename from packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts
rename to packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..946059bfc84
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..1b602deec66
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..0a759d12355
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..ccf74b5c0eb
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-image-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..9e96589e6fa
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..c88748fe251
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-initials-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..47724ea3b85
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..3c2c596617e
Binary files /dev/null and b/packages/core/src/tests/menu-avatar/menu-avatar.e2e.ts-snapshots/menu-avatar-no-dropdown-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/basic/index.html b/packages/core/src/tests/menu-settings/basic/index.html
index 81f6d14881d..a7012a33676 100644
--- a/packages/core/src/tests/menu-settings/basic/index.html
+++ b/packages/core/src/tests/menu-settings/basic/index.html
@@ -15,7 +15,7 @@
-
+
Item 1
Item 2
Item 3
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-dark-linux.png
index f90dd632a7c..74e1ebf96fc 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-light-linux.png
index e5efd6cfbe8..85f00704e85 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-dark-linux.png
index a582ee2b541..334913102fd 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-light-linux.png
index f1cb56ea963..1cc2ae25443 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-label-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-dark-linux.png
index aec27b5657a..d74812080c4 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-light-linux.png
index 40768344368..ed210e95dd1 100644
Binary files a/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-settings/menu-settings.e2e.ts-snapshots/menu-settings-switch-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu/active/index.html b/packages/core/src/tests/menu/active/index.html
index 6ed8542d3e4..5cb01ba98e0 100644
--- a/packages/core/src/tests/menu/active/index.html
+++ b/packages/core/src/tests/menu/active/index.html
@@ -16,7 +16,7 @@
-
+
Item 1
Sub 1
diff --git a/packages/core/src/tests/menu/basic/index.html b/packages/core/src/tests/menu/basic/index.html
index ae8dd683bc4..87aeb43c1b9 100644
--- a/packages/core/src/tests/menu/basic/index.html
+++ b/packages/core/src/tests/menu/basic/index.html
@@ -16,7 +16,7 @@
-
+
Item 1
Sub 1
diff --git a/packages/core/src/tests/menu/link/index.html b/packages/core/src/tests/menu/link/index.html
index f08838c53ae..c5485a060f1 100644
--- a/packages/core/src/tests/menu/link/index.html
+++ b/packages/core/src/tests/menu/link/index.html
@@ -16,7 +16,7 @@
-
+
Link 1
diff --git a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-dark-linux.png
index e5af861a66e..db487b97154 100644
Binary files a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-light-linux.png
index 26965fcf248..00c5a18bfd2 100644
Binary files a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-basic-md---no-default-icon-on-second-level-scaling-for-popup-window-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-dark-linux.png
index d6112a3a4d9..bb7c26783a7 100644
Binary files a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-light-linux.png
index 1eecc5bbcdc..8676667c37e 100644
Binary files a/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu/menu.e2e.ts-snapshots/menu-show-scrollbar-on-overflow-on-expand-on-md-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu/overflow/index.html b/packages/core/src/tests/menu/overflow/index.html
index f65179685d3..a617aa018f8 100644
--- a/packages/core/src/tests/menu/overflow/index.html
+++ b/packages/core/src/tests/menu/overflow/index.html
@@ -19,7 +19,7 @@
-
+
diff --git a/packages/core/src/tests/menu/toggle/index.html b/packages/core/src/tests/menu/toggle/index.html
index 031a7104883..eebeeb66307 100644
--- a/packages/core/src/tests/menu/toggle/index.html
+++ b/packages/core/src/tests/menu/toggle/index.html
@@ -16,7 +16,7 @@
-
+
Item 1
Sub 1
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
index 6f08eb82364..54a5a10769d 100644
--- a/packages/vue/src/components.ts
+++ b/packages/vue/src/components.ts
@@ -587,6 +587,7 @@ export const IxMenu = /*@__PURE__*/ defineContainer('ix-menu', defin
'maxVisibleMenuItems',
'i18nExpandSidebar',
'expand',
+ 'startExpanded',
'pinned',
'i18nLegal',
'i18nSettings',