Navigation Demo · UI Automation Practice

Practice navigation automation scenarios.

This demo page is designed for practicing header navigation, breadcrumbs, page menu links, tabs, active states, disabled links, external links, route validation, hash links, and stable automation selectors.

Breadcrumbs

Validate page hierarchy.

Breadcrumbs are useful for validating that users understand where they are in the application and can navigate back to parent sections.

Current breadcrumb page

Navigation Demo

This is the active breadcrumb page. Click Demos to open a simulated parent page, then click Navigation Demo to return here.

Tabs

Validate active tab states.

Overview tab

Use this tab to practice validating default tab content and selected tab states.

Route Validation

Validate internal routes.

These route cards can be used to practice clicking links, validating the expected URL, and returning to the original page.

Home

Validates navigation back to the QA Labs landing page.

Expected route: /

Open route →

Login Demo

Validates navigation to the Login Demo page.

Expected route: /demos/login

Open route →

Forms Demo

Validates navigation to the Forms Demo page.

Expected route: /demos/forms

Open route →

Tables Demo

Validates navigation to the Tables Demo page.

Expected route: /demos/tables

Open route →

States

Validate navigation states.

Use this interactive navigation group to practice validating active, inactive, and disabled navigation states.

Active navigation item

Dashboard

Main workspace navigation item.

Active

The selected navigation item has a different style and aria-current.

Inactive

Available navigation items can be clicked and become active.

Disabled

Restricted navigation items do not become active and show a message.

Scenarios

Suggested checks for automation practice.

Validate header navigation links

Validate breadcrumb links

Validate page menu hash links

Validate last clicked sidebar item

Validate active tab content

Switch between tabs

Validate disabled navigation item

Validate disabled item message

Validate internal route links

Validate external link exists

Navigate back to demos section

Validate current page breadcrumb

Validate default active navigation state

Click Reports and validate active state

Click Settings and validate active state

Click disabled Admin Panel item

Validate disabled state message

Navigate to Route Validation section from page menu

Navigate to States section from page menu