Ki-Ki Tools
Nav/Footer Generator, built for normal humans
Use this tool to generate reusable navigation and footer partials for static sites.
Import
Fast path, pick a folder in Chrome or Edge. Firefox path, paste a file list.
Checking folder picker
If you are on Firefox, this often does nothing. Use paste import below.
Make a list quickly: find . -type f or dir /s /b.
Most sites should link to folder pages like /contact/, not /contact/index.html.
If you have both /about.html and /about/, the folder version usually wins.
Why this tool exists
If you have ever edited the same menu in 20 files, you already understand the problem. If you want the full rationale, plus the exact pain points this avoids, read the purpose page.
Guide and pages
This is the main workspace. Read the guide once, then use search and add pages into your menu.
How it works read once
What this generates
nav.html and footer.html. Upload both to the site root so every page can load the same layout.
One minute setup
1) Import folder or paste list.
2) Click Auto, or add a dropdown and then add child pages.
3) Download nav.html and footer.html.
4) Upload them to site root.
2) Click Auto, or add a dropdown and then add child pages.
3) Download nav.html and footer.html.
4) Upload them to site root.
Dropdowns
Make a dropdown item first (right panel). Then add pages into it from the Pages list. If you never add children, it renders as a normal link.
Nav health tips
Keep top nav short, around 6 to 8 items. Use short labels, avoid duplicates, keep key pages one click away.
Footer health tips
Put contact routes and location somewhere obvious. A footer that looks like a real business improves trust. This one includes an auto updating year.
Want the logic behind it?
Read the purpose page and you will never go back to inline menus.
Tip: if you do not see child pages, your import only included top level folders. Import the full directory tree, or paste a full file list.
Your menu
Build what people see in the top navigation. A menu item can be a simple link or a dropdown.
nav.html preview copy and paste friendly
footer.html preview auto year
Optional, but it makes the footer look like a real organisation.