elements component

Sitemap

Component

Elements Store
Sitemap
Navigation
cover

Intro

Sitemap builds a complete, elegant map of your site. Every page, organized level by level, styled exactly the way you want, down to each individual level. Built-in search and live filtering make even a large site easy to explore, while highlighting, page counts and page descriptions let you say more about the pages that matter most. And when you need it, one switch turns the same component into a fully styled site navigation.

2 in 1

Sitemap or Site Navigation

cover

Accessibility & SEO

Dual function with dedicated tag

How a component presents itself to search engines and assistive technologies matters just as much as how it looks. This panel gives you full control over that identity: one switch sets the component's role, Sitemap mode keeps things clean and simple, Navigation mode adds Schema.org markup so search engines recognize it as your site menu.

✓ Screen-reader friendly out of the box — a dedicated label describes the component to assistive technologies, with the right suggestion for each mode.
ⓘ The panel guides you: switch the mode and every option adapts.

cover

Arrangement

The classic vertical layout gives your sitemap a clean, readable structure — every page in its place, level after level. When you want the full picture at a glance, switch to horizontal and the tree spreads into columns, showing your whole site structure side by side. Width limits, gaps and equal-height rows are all one click away.

✓ One menu open at a time, opening a section automatically closes the others, keeping the tree compact and easy to scan.
✓ Show or hide the whole component per breakpoint — perfect when the layout changes on small devices.

✓ Equal row height turns your sitemap into a perfectly aligned grid.
✓ Entry animations (onload page or inside a Modal Window)

cover

Content Filtering

Your sitemap follows your site automatically — add a page in RapidWeaver and it shows up, no rebuilding needed. But you decide exactly what appears, and how much of it.

✓ Hidden pages — one switch hides everything that doesn't appear in your site's main menu. Keep the sitemap aligned with your navigation, or show the full picture.

✓ Exclude list — hide any page by writing its title or URL fragment, one per line. Excluding a section hides everything under it too.

✓ Auto-expand — choose how many levels the tree opens by default, from fully collapsed to fully expanded.

✓ Page limit — cap how many pages each section shows before a customizable "Show more" entry appears. Ideal for very large sites.

cover

Highlight Info

Small touches that say a lot. Five independent options tell your visitors where they are and what's behind every link.

✓ Current page — the page being viewed is highlighted in the tree, so visitors always know their position in the site.

✓ Folder icon — marks the sections that only group pages, so visitors instantly know what's a link and what's a folder.

✓ Underline on hover — links get a subtle underline on hover. Folders stay clean.

✓ External links — links pointing outside your site are marked with their own badge, so there are no surprises.

✓ New window — internal pages set to open in a new window get their own indicator too.

✓ Page count — folders show how many pages they contain: direct children only, or the entire nested branch. Add an optional label like "Pages", and pick the badge color to match your design.

cover

Search

Help visitors discover your website:
A built-in search field that works on the tree as visitors type — with two different ways of showing the results, each suited to a different kind of site.

✓ Highlight mode — the tree stays complete, and matching pages light up with a background color of your choice. Perfect when context matters: visitors see the match and where it lives in the structure.

✓ Filter mode — everything that doesn't match simply disappears, leaving only the relevant pages. The fastest way to find one page among hundreds.

✓ Fully styled — placeholder text, field colors, border and background are all yours to customize, so the search box blends into your design.

ⓘ The minimum number of characters before the search kicks in is adjustable.

cover

Page Description

In Elements, every page can have its own description — a short text that presents its content. Sitemap picks up those descriptions automatically and lets you show them right in the tree, page by page.

Inline — the description appears under the page title, turning your sitemap into a guided tour of your site.

Pop-Up on hover — for first-level items, the tree stays compact and the description appears only when visitors want to know more. Sub-pages always show theirs inline.

ⓘ Write descriptions once in Elements, Sitemap does the rest, and pages without one simply show nothing.

Top Level Text Style

✓ Full typographic control over first-level items: font, size, weight, spacing, case, shadow — plus a separate color for the hover state. Style once, and every top-level page follows.

✓ Toggle icon — the small marker that tells visitors a section can be opened. Choose the symbol, set its size and color, and give it a separate color for the open state, so expanded sections are recognizable at a glance.

ⓘ All values are responsive — adjust them per breakpoint in Theme Studio.

Top Level Background

✓ Give first-level items their own background, with static and hover colors, opacity, borders, corner radius and shadow.

✓ Backdrop blur included for a modern glass effect.


ⓘ Switch between a single color or separate static/hover colors.

Top Level Transforms

This is the tool to animate your items on hover. A slight lift, a gentle tilt, a touch of scale — the kind of feedback that makes a page feel alive.
✓ Scale, rotate, translate and skew — with separate start and hover values for subtle motion effects.
✓ Small transforms, big personality.

ⓘ Best combined with Transitions for smooth movement.

cover

Sub Pages Preview

✓ Keep all sub-menus open while you design, so you can style every level without clicking around.


ⓘ Edit mode only, the published site is never affected.

Sub Pages Text Style

✓ Sub-pages get their own complete typographic set, independent from the top level, plus adjustable opening speed for the menus.


✓ Each level indents automatically for a clear hierarchy.

ⓘ Deeper levels inherit the sub-page style for consistency.

Sub Pages Background

✓ Dedicated background controls for sub-menus, with full-width extension so every level lines up edge to edge.


✓ The tallest column determines the height of all columns, enable Equal Height for a perfect checkerboard look.

ⓘ Full Width applies to every nested level automatically.

Sub Pages Transforms

✓ The same transform engine as the top level, applied to sub-pages: scale, rotate, translate and skew with start and hover values.


ⓘ Best combined with Transitions for smooth movement.

Spacing

✓ Margin and padding for the whole container — the outer frame that holds the entire sitemap. Level-specific spacing lives in its own panel, inside Top Level and Sub Pages.

ⓘ All spacing values are responsive per breakpoint.

cover

Transitions

✓ One place to control how everything moves: property, easing, duration and delay, from instant to silky slow.


ⓘ Transitions are disabled in edit mode, so the canvas always feels instant. Enablw ‘Preview’ to show animaitons also in edit mode.

cover

Drop Zone

✓ Two free areas, before and after the tree, the natural place for a title, your site logo, social icons, or extra information like phone numbers and addresses.

ⓘ Drop in any component you like — both zones follow the column width for a seamless look.

Advanced

✓ add custom Tailwind or utility classes for advanced layout control.

Demo file included ready to use styles

Everything you're browsing right now comes with the component: this very site, with all its demos, ready to open and edit. Every page shows a different configuration, sitemaps and navigation menus, from the most detailed to the most compact. Pick the ones that fit your project, drop them in, and make them yours.

ⓘ Once installed, you’ll find the demo project in the available projects panel when creating a new one. If you don't see it, click on 'View All (See' all library items)

Compatibility note: Sitemap Component is fully compatible with Elements V3 and includes all updates required for Tailwind 4.

Made with Elements®

Multithemes Store

Sitemap

A complete, automatically generated map of your site: every page, organized level by level and fully styled. One switch turns it into your site navigation.

Release Notes

Build 1

Initial Release