All 141 tools / Layout, grids and spacing
Analyse a navigation tree for depth, breadth, one-child branches, naming collisions and orphan pages
Navigation depthFreeFor designers and product teams
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You paste text, CSS, markup or notes.
tree:
Home
Products
Laptops
Business laptops
Ultrabooks
14 inch
Phones
Support
Help
Contact
Contact
About
Support
maxDepth: 4
maxBreadth: 9
pages:
Pricing
Support
Products
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
13 nodes, 6 leaves, 4 top-level items, 5 levels deep. Limits used: depth 4, breadth 9.
Per level:
level 1: 4 nodes, average 1.3 children
level 2: 5 nodes, average 0.4 children
level 3: 2 nodes, average 0.5 children
level 4: 1 node, average 1 children
level 5: 1 node, average 0 children
Widest branch: "Products" with 2 children.
10 findings:
[medium] 1 item deeper than 4 levels, for example "Products > Laptops > Business laptops > Ultrabooks > 14 inch"
[low] "Products > Laptops" has a single child ("Business laptops"); a one-item level adds a click and no choice
... full output on the tool page
What you get
Node and leaf counts, per-level breadth, branches over your limits, collisions, and orphans
What it cannot do
Checks structure and labels, not findability; defaults are depth 4 and breadth 9, which are conventions.
Who it is for
- Designers
- Product teams
Free and Pro
| Free | 25 runs a day per IP address, up to 60,000 characters a run. |
|---|---|
| Pro | No daily limit, 300 requests a minute, up to 200,000 characters a run. |
Use it from your assistant
The tool is called nav_depth_check. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.
claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/nav-depth-check -H 'content-type: application/json' -d '{"tree":"Home\nProducts\n Laptops\n Business laptops\n Ultrabooks\n 14 inch\n Phones\nSupport\n Help\n Contact\n Contact\nAbout\n Support","maxDepth":4,"maxBreadth":9,"pages":"Pricing\nSupport\nProducts"}'
Try it here
The form starts with the same example input, so you can run it first and then swap in your own.
More in layout, grids and spacing
- Grid builder
Build a column or modular grid from a page width, with every span width, CSS and Figma layout settings
- Spacing scale
Generate a set of spacing tokens from a base unit, as a linear ladder, a modular scale or your own steps
- Proportion calculator
Work out the missing side of a golden, root-2 or custom ratio and split a container at that ratio
- Breakpoint planner
Plan responsive breakpoints from the widths where your layout breaks, with ready CSS and fluid clamp() rules
- Proximity and alignment check
Find near-miss alignments, uneven gaps and orphaned boxes in a layout from box coordinates or markup
- Spacing audit
Detect the spacing base unit in a stylesheet, list off-grid values and propose a cleaner scale