ITV Style Scrolling Navigation

ITV Style Scrolling Navigation

A custom Elementor-based navigation component inspired by the horizontal scrolling navigation used on ITV’s website (itv.com), commonly seen across their daytime programme pages. The plugin provides a smooth, mobile-friendly way to display navigation items in a scrollable format, improving usability and content discoverability on content-heavy pages.

Overview

Horizontal scrolling navigation

Displays menu items in a smooth, scrollable row, allowing users to navigate sections without traditional dropdown menus.

Elementor widget integration

Built as a native Elementor widget, allowing drag-and-drop placement and full control within the Elementor editor.

Menu and dynamic content support

Supports both manually added items and WordPress menus, enabling flexible navigation setups.

Mobile-first interaction design

Optimised for touch devices with smooth horizontal scrolling and responsive behaviour.

Customisable styling controls

Includes options for spacing, typography, alignment, and hover effects to match different design systems.

How It Works

Widget added via Elementor

The scrolling navigation is added to a page using the Elementor editor as a custom widget.

Menu or list configuration

Navigation items can be created manually or pulled dynamically from a WordPress menu.

Horizontal scroll behaviour

Items are displayed in a row with overflow scrolling, allowing users to swipe or scroll through options.

Responsive adjustments

The layout adapts across screen sizes, ensuring usability on mobile, tablet, and desktop.

Styling and interaction controls

Design settings are applied within Elementor, allowing customisation without additional code.

Tech Stack

Wordpress
Elementor
Php
JavaScript
Css
Custom Elementor Widget
Responsive design