Gallery

Design a sticky navigation pill that stays pinned near the top of the viewport while the user scrolls. It should present 4–6 section links in a single horizontal control, with one active item clearly distinguished from the rest.

Treat this as a compact in-page navigation pattern, not a full site header. The pill should feel lightweight, sit above the content without covering it, and preserve enough spacing so the page remains readable as users move through long sections.

Show the default state, active state, hover/focus states, and a mobile adaptation. On smaller screens, the pattern can scroll horizontally or collapse into a shorter form, but the primary section and current location still need to be obvious.

Keep labels short and specific. If you use icons or color, they should support the text, not replace it. The control should work with mouse, touch, and keyboard, and the active state should remain visible as the page scrolls.