You Are Here
A navigation bar that knows where the visitor is. The item for the page being shown lights by itself, from Framer’s own page links and already in the served HTML; on a one page site, the item for the section being read lights as the visitor scrolls; and at a width you set, the bar folds into a menu button. No variant per page.
Scroll this panel.
It is a one page site inside this page. The bar stays at the top of the panel while you read, and lights where you are.
Pages light by themselves
Point an item at a page and it lights on that page, from Framer’s own page links. Top is lit up there because it links to this page, and the served HTML already says so with aria-current, before any script has run. No variant per page, nothing to set per page.
Sections light as they are read
Point an item at a section of a page, a frame with a scroll target, and it lights while that section crosses the reading line near the top of the window. Press an item and it lights at once, and stays lit while the page travels there.
It folds at its own width
Below a width you set, the bar folds into a menu button. The width is the bar’s own, not the window’s, so it folds right in a sidebar, a card or a narrow column. Escape or a press outside closes the menu, and focus goes back to the button.
Details
A pill or an underline, a bar or a capsule, every colour and both fonts. The marker slides, except for a visitor who asks for reduced motion.
A one page site inside this page. Top is lit because it links to this page. Scroll the panel: each section lights as its top crosses the line near the top of the window, and a press on an item lights it at once while the page travels there.
The same bar at 390 px, as a capsule on dark. Below the width you set it folds into a menu button: press Menu, and Escape or a press outside closes it.