diff --git a/packages/headless-stepper-e2e/src/integration/HeadlessStepper/HeadlessStepper.spec.ts b/packages/headless-stepper-e2e/src/integration/HeadlessStepper/HeadlessStepper.spec.ts
index e9b2156..679fd1c 100644
--- a/packages/headless-stepper-e2e/src/integration/HeadlessStepper/HeadlessStepper.spec.ts
+++ b/packages/headless-stepper-e2e/src/integration/HeadlessStepper/HeadlessStepper.spec.ts
@@ -1,7 +1,37 @@
 describe('headless-stepper: HeadlessStepper component', () => {
-  beforeEach(() => cy.visit('/iframe.html?id=headlessstepper--primary'));
-    
-    it('should render the component', () => {
-      cy.get('h1').should('contain', 'Welcome to HeadlessStepper!');
+  beforeEach(() =>
+    cy.visit('/iframe.html?id=headlessstepper-usestepper--use-stepper')
+  );
+
+  it('should render the component', () => {
+    cy.get('h1').should('contain', 'Welcome to HeadlessStepper!');
+  });
+
+  it('should navigate by clicking on the menu unless it is disabled', () => {
+    cy.get('p').should('contain.text', 'Current step: 0');
+
+    cy.get('ol > a').each((element) => {
+      const { attributes, textContent } = element[0];
+      const [, step] = textContent.split(' ');
+
+      const ariaDisabled = attributes.getNamedItem('aria-disabled');
+      const stepNumber = Number(step) - 1; // If step is called "Step 1" the index is 0
+
+      cy.wrap(element).click();
+
+      if (ariaDisabled) {
+        /**
+         * -1 means the step was not changed since it is disabled.
+         */
+        cy.get('p').should('contain.text', `Current step: ${stepNumber - 1}`);
+      } else {
+        cy.get('p').should('contain.text', `Current step: ${stepNumber}`);
+      }
+
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(200);
     });
+
+    cy.get('p').should('contain.text', 'Current step: 5');
+  });
 });
diff --git a/packages/headless-stepper/src/lib/examples/HeadlessStepper.spec.tsx b/packages/headless-stepper/src/lib/examples/HeadlessStepper.spec.tsx
index 801f30b..ef50aef 100644
--- a/packages/headless-stepper/src/lib/examples/HeadlessStepper.spec.tsx
+++ b/packages/headless-stepper/src/lib/examples/HeadlessStepper.spec.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import HeadlessStepper from './HeadlessStepper';
 
@@ -7,4 +7,22 @@ describe('HeadlessStepper', () => {
     const { baseElement } = render(<HeadlessStepper />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should navigate by clicking on the menu unless it is disabled', () => {
+    const { queryByText, getByText } = render(<HeadlessStepper />);
+    expect(queryByText('Current step: 0')).toBeTruthy();
+
+    const secondStep = getByText('Step 2');
+    const thirdStep = getByText('Step 3');
+    const fourthStep = getByText('Step 4'); // step disabled
+
+    fireEvent.click(secondStep);
+    expect(queryByText('Current step: 1')).toBeTruthy();
+
+    fireEvent.click(thirdStep);
+    expect(queryByText('Current step: 2')).toBeTruthy();
+
+    fireEvent.click(fourthStep);
+    expect(queryByText('Current step: 3')).toBeFalsy();
+  });
 });
diff --git a/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx b/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
index 02288b0..e4c4429 100644
--- a/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
+++ b/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
@@ -25,6 +25,7 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
     });
   return (
     <div className={styles['container']}>
+      <h1>Welcome to HeadlessStepper!</h1>
       <div>
         <nav style={{ display: 'flex' }} {...stepperProps}>
           {stepsProps?.map((step, index) => (
diff --git a/packages/headless-stepper/src/lib/hooks/useStepper.ts b/packages/headless-stepper/src/lib/hooks/useStepper.ts
index 45b6636..b5196a0 100644
--- a/packages/headless-stepper/src/lib/hooks/useStepper.ts
+++ b/packages/headless-stepper/src/lib/hooks/useStepper.ts
@@ -177,7 +177,7 @@ const useStepper = ({
         'aria-current': index === _currentStep ? 'step' : undefined,
         'aria-selected': index === _currentStep,
         onKeyDown: (event) => handleKeydown(event, index),
-        onClick: () => setCurrentStep(index),
+        onClick: () => (step.disabled ? null : setCurrentStep(index)),
         ref: (element: HTMLElement) =>
           (stepElementsRef.current[index] = element),
       } as HTMLAttributes<HTMLElement>;