Webflow Native Nav Dropdown & Tabs Demo

This demo addresses a specific issue in Webflow’s native navigation. In the native nav, clicking any link closes the nav, which is the expected behavior. However, when native tabs are used in the nav—whether inside a dropdown or not—clicking a tab link on mobile or tablet devices (screens ≤ 991px) inadvertently closes the nav.

This demo was born from a real-world case where someone experienced this issue inside a dropdown. Although we used that scenario for demonstration, the fix applies broadly to tabs in the nav at mobile breakpoints.

The included script stops the click event from “bubbling up” from the tab menu, so tab interactions don’t close the nav. Optionally, it can allow clicks on links within the tab content (.w-tab-content) to bubble up—so those clicks can still close the nav if desired.

The behavior is controlled by a central configuration object (TabConfig) with these options:

• tabletBreakpoint: Maximum screen width (in pixels) where the fix applies (default: 991px).

• allowTabContentLinkBubbling: If true, click events on links inside tab content are allowed to bubble up (default: true).

• debounceTime: Delay (in milliseconds) for debouncing window resize events (default: 100ms).

• tabSelector: CSS selector for targeting native Webflow tab containers (default: nav .w-tabs).

The script is included below this description.