Liquid Section Navigator
A floating section navigator with a liquid active indicator, scroll tracking, three visual presets, optional progress and a compact mobile menu.
Quick Start
- Use Add to Framer from your purchase confirmation or receipt, or paste the supplied component URL into your Framer project.
- Add one instance to the page. The editor displays an inline preview; Preview and the published website position the navigator against the viewport.
- Give each destination section a unique scroll-section name / HTML ID in Framer, such as
home,workandcontact. A layer's display name alone is not an anchor. - In Sections, set Label and the matching Anchor. You can enter
workor#work. Keep the list in the same order as the page. - Choose Appearance → Preset and Layout → Position. Start with Bottom Center and Horizontal.
- Open Preview, click each link, scroll through the page, and test the mobile menu. If a fixed header covers the destination, set Navigation → Section Offset to its height.
The default list contains Home, Work, Services, About and Contact with lowercase anchors. These sections are not created for you. Missing targets are omitted from the live navigator; if none exist, the navigator is hidden. Canvas can show a setup placeholder.
Sections and Anchors
| Control | Options / default | Purpose |
|---|---|---|
| Sections | Up to 10 entries | Same-page destinations, in navigation order. |
| Label | New entry: Section | Visible desktop label; keep it concise. |
| Anchor | New entry: section | Existing destination ID, with or without #. |
| Mobile Label | Empty | Optional shorter label; falls back to Label. |
| Icon | None, Home, Grid, Spark, Person, Mail, Arrow | Built-in icon before the label; default None. |
| Enabled | On | Excludes the entry when off. |
Use unique IDs and non-empty labels. Disabled, invalid and duplicate entries are ignored. IDs are case-sensitive. Use simple lowercase names with hyphens for reliable setup. This component links to sections on the current page, not to other routes or external URLs.
The active item follows document scrolling. At the top it selects the first valid section; at the page bottom it selects the last. A click keeps the chosen item active during smooth travel, then returns control to scroll tracking. Wheel, touch or keyboard interruption releases that navigation lock. Changing section size or loading content can update the tracked positions.
Layout
| Control | Options or range | Default |
|---|---|---|
| Position | Top Center, Top Left, Top Right, Bottom Center, Bottom Left, Bottom Right | Bottom Center |
| Orientation | Horizontal, Vertical | Horizontal |
| Edge Offset | 0–120 px | 24 px |
| Horizontal Inset | 0–200 px | 0 px |
| Padding | 0–24 px | 6 px |
| Item Gap | 0–24 px | 3 px |
| Item Padding | 8–32 px | 16 px |
| Layer | 0–10000 | 100 |
Edge Offset separates the bar from the selected top or bottom edge. Horizontal Inset provides additional horizontal spacing. Layer controls stacking. Leave room for cookie notices, chat widgets and other fixed controls. The bar accounts for device safe areas. Horizontal lists can scroll when their contents exceed the available width; vertical lists are height-limited to the viewport.
The navigator is fixed on the live page even if its instance sits in a stack. Reserve any desired breathing room in your page layout yourself. Use only one instance per page unless you intentionally want multiple navigation bars.
Appearance and Presets
| Preset | Appearance |
|---|---|
| Warm Glass | Warm translucent surface, dark labels and coral active indicator. Default. |
| Midnight | Dark surface, light labels and pale active indicator. |
| Cobalt | Blue surface, white labels and white active indicator. |
Custom Colors is off by default. Enable it before changing Surface, Border, Blob Color, Typography Active / Inactive, or Progress Color / Track. Saved custom values do not override a preset while this switch is off.
| Control | Default | Range / behavior |
|---|---|---|
| Glass | On | Enables surface transparency and backdrop blur. |
| Surface | #F5F3ED | Used with Custom Colors. |
| Opacity | 0.84 | 0–1; available when Glass is on. |
| Blur | 20 px | 0–40 px; available when Glass is on. |
| Border | rgba(26,25,23,0.12) | Used with Custom Colors. |
| Border Width | 1 px | 0–4 px. |
| Radius | 999 px | 0–999 px; high values create a pill. |
| Shadow | Soft outer shadow and light inner highlight | Native shadow control. |
Disabling Glass uses an opaque surface. Blur appearance depends on the content behind the navigator and browser support. Check text contrast after changing colours or opacity.
Blob and Motion
A single active indicator moves and resizes between labels. Motion offers Soft, Balanced (default), Snappy and Custom. Liquid Stretch defaults to 0.45 (0–1) and adds a bounded deformation during movement; zero removes stretch.
| Control | Default | Range / behavior |
|---|---|---|
| Color | #FF684A | Used with Custom Colors. |
| Opacity | 1 | 0–1. |
| Radius | 999 px | 0–999 px. |
| Shadow | Subtle outer shadow | Native shadow control. |
| Glow | 0 px | 0–24 px. |
| Border / Border Width | Transparent / 0 px | Border width 0–4 px. |
| Stiffness | 420 | 50–900; Custom motion only. |
| Damping | 38 | 12–80; Custom motion only. |
| Mass | 0.85 | 0.2–3; Custom motion only. |
Higher stiffness reacts faster; damping reduces oscillation; mass changes the sense of weight. Begin with a named motion setting and only use Custom when you need fine tuning.
Typography
Font is Framer's extended font control. Defaults are a sans-serif font at 14 px, Medium weight, -0.02em letter spacing and 20 px line height. Inactive and Active default to #1A1917 and apply when Custom Colors is enabled. The active indicator adapts to the label dimensions. Longer labels and larger fonts need more space; provide Mobile Label where helpful.
Navigation and Progress
| Control | Options / range | Default |
|---|---|---|
| Scroll Behavior | Smooth, Instant | Smooth |
| Section Offset | 0–200 px | 0 px |
| Auto Hide | On, Off | Off |
| Hide Threshold | 6–60 px | 12 px |
| Scroll Compression | On, Off | Off |
| Compression | 2–10 | 6 |
| Update Hash | On, Off | On |
| Progress → Type | None, Line, Ring | None |
| Progress → Thickness | 1–6 px | 2 px |
| Progress → Ring Size | 16–40 px | 24 px |
Section Offset is shared by click destinations and active-section tracking. Auto Hide conceals the navigator while scrolling down and reveals it while scrolling up. Hide Threshold reduces flicker from small changes. Hover, keyboard focus, an open mobile menu and navigation interaction protect access to the bar. Scroll Compression adds a small temporary compression while scrolling.
Update Hash replaces the current URL fragment after navigation without creating a new browser-history entry for every click. Turn it off if your page uses the hash for another purpose.
Progress measures the whole document's scrollable distance, not the current section. Line is a thin track in the bar; Ring adds a circular indicator. Color and Track are controlled by the preset unless Custom Colors is enabled. Their custom defaults are #FF684A and rgba(26,25,23,0.12).
Mobile and Accessibility
Compact Mode is on by default below Breakpoint 768 px (configurable from 480 to 1024). It shows the current section and a toggle that expands the list. Close on Select defaults to on. Expanded Style offers Rounded (default) or Compact. Escape, an outside interaction or leaving the menu with keyboard focus can close it. The toggle comes before the links in keyboard order.
Links support Enter and Space, have a visible focus state and identify the active destination with aria-current. Accessibility → Nav Label defaults to Page sections; translate it for your audience. The compact toggle uses built-in English open/close labels. Touch targets have a minimum height of 44 px.
Reduced Motion is on by default. With the device preference enabled, the component removes liquid/spring motion and scroll compression, uses instant scrolling and reduces the hide animation. Keep this option enabled for accessible motion preferences. Test your chosen colours, labels and surrounding layout as part of your site's accessibility review.
Demo and Delivery
The public demo includes an example portfolio, a settings toolbar and a Progress Line override. The purchased standalone component starts with Progress None. The portfolio content and demo toolbar are not included in the component.
Your purchase includes Add to Framer access and a bilingual setup download. It does not require an external service, API key or separate animation package. Use Preview or a published Framer page for scrolling and interaction; Canvas is an inline editor preview.
Troubleshooting
The navigator or one of its items is missing
Confirm that the section exists on the current page, its actual ID matches Anchor, the entry is Enabled, and Label is not empty. Check for duplicate IDs or duplicate entries. A layer's display name is not necessarily its HTML ID. Test in Preview after configuring scroll sections.
A destination is covered by a header
Set Section Offset to the height of the fixed header. Keep section order aligned with page order and avoid applying competing scrolling scripts to the same links.
Colours do not change
Enable Appearance → Custom Colors. With it off, the selected preset owns the surface, text, active indicator and progress colours.
Mobile links are hidden
Compact Mode initially displays only the current item. Open the menu or disable Compact Mode. Shorten Mobile Label if an expanded horizontal list becomes crowded; overflowing horizontal lists can be scrolled.
The bar overlaps another fixed element
Adjust Position, Edge Offset and Horizontal Inset. Change Layer only when appropriate for your page's stacking order. Check both desktop and phone layouts.
Canvas behaves differently from the website
Canvas deliberately stays inline and avoids controlling page scrolling. Use Preview for fixed positioning, target detection, mobile interaction and auto hide.
FAQ
Does it create my page sections?
No. Add and name your destination sections in Framer, then connect them through Sections.
Can it navigate between pages or inside a separately scrolling frame?
No. This version tracks document scrolling and same-page IDs. It does not track independently scrolling containers, cross-page routes or nested menu hierarchies.
Can I use ten sections?
Yes, up to ten enabled, valid, unique entries. Keep labels concise and check overflow on narrow screens. The list is configured manually; it does not generate navigation from a CMS collection.
Why is the last item active before its heading reaches the top?
At the document bottom, the last valid destination becomes active even when that section is too short to reach the top. This keeps short final sections reachable and represented.
Changelog
v1.0
Initial release.
- Liquid active indicator with three visual presets and adjustable spring motion.
- Same-page scroll tracking, shared section offset and optional document progress.
- Six fixed positions, horizontal or vertical layout and compact mobile navigation.
- Keyboard access, reduced-motion support and English/Spanish documentation.
arforgelabs.support@proton.me