ChatDiagram
Try for free
web design · information architecture

Website navigation tree chart example.

A website navigation tree is a quick map of the pages a visitor can reach and how those pages are grouped. It is especially useful at the start of a redesign, when teams need to agree on information architecture before discussing visual design. Keep the top level short and name each section by the visitor’s goal, not an internal department. This example separates company information, services and resources, then puts related detail pages underneath. Add deeper levels only where the site genuinely needs them.

Type Organisation chartStandard Reingold-Tilford tidy treeEngine schematex-orgchartUpdated 9/24/2026
Small Business Website Tree
Drawing preview
The request

“Create a website navigation tree chart with About containing Team and Careers, Services containing Consulting and Training, Resources containing Guides and Case Studies, plus a Contact page.”

Then tryAdd a Pricing page under Services.Add a newsletter signup under Resources.
What is in this drawing

Read the decisions behind it.

01Primary navigation

Keep the first level focused on main visitor needs.

02Page grouping

Place related pages below their parent section.

03Contact path

Keep contact reachable from the root.

Use this tree chart to agree a simple site structure before wireframing.

More like this

Other examples in this family.

Loading drawing…
Product category tree chart exampleretailOpen →
Loading drawing…
Website redesign work breakdown structureproject managementOpen →
Loading drawing…
Website redesign Gantt chartproject managementOpen →

Browse all org chart templates →

FAQ

Common questions

What is a website navigation tree?

It maps the hierarchy of pages and sections in a website.

Why make one before wireframes?

It helps teams agree what pages exist and where visitors will find them.

How many top-level pages should a site have?

Use a small set of clear sections that cover the main visitor tasks.