Sitemap Page Design
A clean, accessible sitemap layout that helps users and search engines navigate your site structure at a glance.
Ingredients
- One dedicated route at
/sitemap - Hierarchical page tree grouped by section
- Semantic
<nav>with nested lists - Tailwind grid or multi-column layout
Instructions
- 1
Create the route
Add
app/sitemap/page.tsx. Export a default component that renders the full page tree. - 2
Build the section grid
Use a responsive grid — two columns on tablet, three on desktop. Each column holds a section heading and its child links.
- 3
Wire up links
Use
<Link>for every entry. Group related pages under bold section titles. Keep link text concise. - 4
Add visual hierarchy
Indent child links with padding or a left border. Use muted text for descriptions beneath each link.
Notes
This is a human-facing sitemap, not an XML sitemap for crawlers. Pair it with a proper sitemap.xml generated via Next.js metadata or a build script. Keep the page static — no client-side fetching needed.