Visual Sitemap
A component that generates a miniature visual map of a webpage's structure, highlighting different HTML elements with customizable colors for improved navigation.
Make it with Workshop
Build your own component with AI
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
