← Back to Documentation

Documentation

Developer navigation panel Fast project navigation while you build

The Developer Navigation Panel (short: DNP) is a floating menu that automatically collects useful links: all pages, icons preview, and project-page template — so you can jump around the project instantly.

Download Animmaster Vite Template Save your time — start now

What is the Developer Navigation Panel?

The Developer Navigation Panel is a small floating UI panel that appears on top of the site during development (and optionally in production builds). It helps you move around the project without searching for files or typing URLs.

Main idea
You work faster because navigation is always one click away.

What it shows automatically

The panel builds a list of links based on your project setup:

  • All project pages — links to all .html files located in the root of src/ (for fast navigation).
  • Icons preview — if icon font generation is enabled, it adds a link to the page where you can see all icons + their class names (opens in a new tab).
  • Project-page template — if the project page generator is enabled, it adds a link to the project-page template for easier editing (opens in a new tab).
Tip
If you don’t see a link (icons or project page) — it usually means the related feature is disabled in template.config.js.

How to configure it

All settings live inside template.config.js under the navpanel key. You can enable the panel for development, for production output, and change its look.

template.config.js — navpanel

navpanel: {
  dev: true,        // show in dev mode
  build: false,     // show in production build
  position: "right",// left / right
  color: "#E5E7EB", // text + links
  background: "rgba(17, 24, 39, 0.92)", // panel background
  transition: 220   // animation speed in ms
}

dev

Shows the panel in development mode (true/false).

build

Shows the panel in production output (true/false).

position

Panel position: left or right.

color

Text and links color of the panel.

background

Panel background color (supports rgba for transparency).

transition

Open/close animation speed in milliseconds.

Notes

Be careful in production
If you set build: true, the panel can appear in the final build output. This is useful for demos, but usually should be disabled before shipping a public site.

Download

Every project you start without a solid foundation costs you time. Download Animmaster Vite Template and start your next project with a structure that already works.

Download Animmaster Vite Template Save your time — start now