Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/colorful/llms.txt

Use this file to discover all available pages before exploring further.

The Navigation component is the single shared nav element across every page of the Colorful theme. It renders as a circular toggle button fixed to the bottom-right corner of the viewport and expands into a stacked radial list of route links, each color-coded to its destination. The component is always present on screen but intentionally stays out of the way of page content until the visitor activates it.

​
How it works

Navigation is positioned fixed at bottom-8 right-8 with a z-50 stacking context, ensuring it floats above all page content. Clicking the toggle button switches the component between open and closed states tracked by a single useState boolean. When the menu opens, a semi-transparent backdrop-blur-sm overlay (bg-slate-900/20) fades in behind the link list at z-40 to gently dim the page. Clicking the overlay closes the menu — the same effect as clicking the toggle button a second time. Both the overlay and the route list are wrapped in Framer Motion’s AnimatePresence so they animate cleanly on both entry and exit without leaving orphaned DOM nodes. Toggle button — The button is a 64 × 64 px circle (w-16 h-16) with a bg-slate-900 base. On hover the .bg-fluid-gradient layer fades in at full opacity, replacing the dark background with the animated multi-color gradient. The + icon inside rotates 45° (to form an ×) when the menu is open, driven by a spring transition (stiffness: 260, damping: 20).

​
Route list

The route array is hardcoded directly in Navigation.js. Each object defines the path React Router navigates to, the label shown on the pill, and the hex accent color applied to that route’s active and hover states. 
const routes = [
  { path: '/',            label: 'Hello, World',    color: '#2dd4bf' },
  { path: '/about',       label: 'The Vibe',        color: '#ec4899' },
  { path: '/projects',    label: 'Made With Love',  color: '#f59e0b' },
  { path: '/skills',      label: 'The Toolbox',     color: '#84cc16' },
  { path: '/work',        label: 'The Journey',     color: '#6366f1' },
  { path: '/case-studies',label: 'Long Story Short',color: '#a855f7' },
  { path: '/blog',        label: 'Thoughts & Things',color: '#14b8a6' },
  { path: '/testimonials',label: 'Nice Words',      color: '#ec4899' },
  { path: '/contact',     label: 'Say Hi',          color: '#f59e0b' },
];
Each route pill animates in with spring physics (stiffness: 300, damping: 22). The items stagger using a delay calculated from their reverse index in the list — the route closest to the toggle button appears first, so the menu appears to grow upward. On close, the stagger reverses so the topmost item exits last.
The route list is hardcoded inside components/Navigation.js. Editing routes requires updating that array and ensuring the corresponding HTML file (e.g. about.html) exists in the project root, since the theme is a static multi-file build.

​
Active-state styling

The component uses React Router’s useLocation hook to compare each route’s path against the current pathname on every render.
StateBackgroundTextBorder
ActiveSolid fill — the route colortext-white2px solid the route color
Inactivebg-whitetext-slate-8002px solid the route color
Both states share px-4 py-2 rounded-full font-display text-sm md:text-base font-medium shadow-lg on the pill element. An inactive pill scales up to 1.05 on hover via the hover:scale-105 utility.

​
Customizing routes

Each entry in the routes array accepts three fields:
FieldTypeDescription
pathstringThe React Router path; must match a corresponding HTML file name
labelstringThe visible text shown on the pill
colorstringAny valid CSS hex color used for the accent and active fill
To add a new route, push a new object into the array and create the matching HTML page in the project root. To remove a route, delete its object from the array. Reordering the array changes the visual order of the pills in the open menu. 
// Example: adding a new "Gallery" route
{ path: '/gallery', label: 'Gallery', color: '#f472b6' },

​
Accessibility

The toggle button carries a dynamic aria-label that switches between "Open navigation menu" when the menu is closed and "Close navigation menu" when it is open, giving screen-reader users a clear description of the button’s current action. The backdrop overlay responds to click events so pointer users can dismiss the menu by clicking outside the pill list. For keyboard navigation, each pill is rendered as a standard React Router <Link> (<a> in the DOM), so the full keyboard tab order and Enter/Space activation behavior applies without additional configuration. 
<motion.button
  aria-label={isOpen ? 'Close navigation menu' : 'Open navigation menu'}
  ...
>
Route pills use whitespace-nowrap to prevent label text from wrapping on narrow viewports, and the font size steps up from text-sm to md:text-base on medium-width screens.

Build docs developers (and LLMs) love

Get started for freeTalk to us