Visual Sitemap

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

Description

Pagemap creates a miniature visual representation of a webpage's structure, similar to a document outline or "mini-map" found in code editors. It renders different HTML elements (headers, sections, articles) with distinct colors, providing users with a visual overview of the page content and structure.

Use Cases

1. Long-Form Content - Navigation aid for lengthy articles or documentation

2. Complex Layouts - Visual overview of page sections and hierarchy

3. Web Applications - Quick navigation between different functional areas

4. Documentation Sites - Help users understand document structure

5. Blogs and Articles - Allow readers to quickly scan and jump to sections

Customizations

• Map Background - Background color of the miniature map

• Block Color - Color for structural elements like headers, sections, and articles

• Secondary Color - Highlighting for H1 headings and links

• Tertiary Color - Distinct color for H2, H3, and H4 headings

• Dimensions - Adjustable width and height of the map

• Position - Can be placed anywhere within a layout