Skip to main content

Documentation Index

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

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

The Navigation component is the persistent top bar that appears on every page. It renders a row of nine sigil icons — one per route — and uses Framer Motion’s shared layout animation to slide a glowing amber flame indicator between icons as the active route changes.

​
Visual structure

The bar is a fixed element spanning the full viewport width, sitting above all page content. Its background is a gradient that fades from the dark witch theme color into transparency, allowing the smoke layer beneath to bleed through the bottom edge: 
background: linear-gradient(to bottom, var(--witch-dark), rgba(--witch-dark, 0.8), transparent)
Each nav item renders its sigil icon centered in a column, with the item label printed in small text beneath it. On hover, a short italic Latin incantation appears below the label.

​
Navigation items

The navItems array is the single source of truth for the navigation bar. Each entry maps a route path to a display label, a sigil icon component, and a Latin incantation shown on hover. 
const navItems = [
  { path: "/",             label: "The Sanctum",  icon: SanctumIcon,      incantation: "Initium Novum" },
  { path: "/about",        label: "The Witch",    icon: WitchIcon,        incantation: "Nosce Te Ipsum" },
  { path: "/projects",     label: "Summonings",   icon: SummoningsIcon,   incantation: "Fiat Lux" },
  { path: "/skills",       label: "Arcana",       icon: ArcanaIcon,       incantation: "Potentia Abscondita" },
  { path: "/work",         label: "Pacts",        icon: PactsIcon,        incantation: "Foedus Aeternum" },
  { path: "/case-studies", label: "Workings",     icon: WorkingsIcon,     incantation: "Opus Magnum" },
  { path: "/blog",         label: "Journal",      icon: JournalIcon,      incantation: "Verba Volant" },
  { path: "/testimonials", label: "Whispers",     icon: WhispersIcon,     incantation: "Vox Populi" },
  { path: "/contact",      label: "Commune",      icon: CommuneIcon,      incantation: "Nuntius Transmissus" },
];
PathLabelIncantation
/The SanctumInitium Novum
/aboutThe WitchNosce Te Ipsum
/projectsSummoningsFiat Lux
/skillsArcanaPotentia Abscondita
/workPactsFoedus Aeternum
/case-studiesWorkingsOpus Magnum
/blogJournalVerba Volant
/testimonialsWhispersVox Populi
/contactCommuneNuntius Transmissus

​
Active flame indicator

The active route is highlighted by a motion.div rendered behind the active icon. Because it carries layoutId="activeFlame", Framer Motion tracks its position in the DOM and automatically animates it from the previous icon position to the new one whenever the active route changes — no custom animation code required. 
{isActive && (
  <motion.div
    layoutId="activeFlame"
    className="absolute inset-0 bg-witch-amber/10 rounded-lg"
  />
)}
The flame indicator creates a warm amber glow beneath whichever sigil icon corresponds to the current route. When the user navigates to a new page, the glow slides smoothly across the bar to the new icon.
layoutId animations require AnimatePresence to be present somewhere in the component tree. Because Navigation is always mounted (it lives inside Layout), the AnimatePresence wrapping the route transitions at the router level is sufficient.

​
Active and inactive icon styles

StateCSS classes
Activetext-witch-amber drop-shadow-[0_0_5px_rgba(245,158,11,0.5)]
Inactivetext-witch-moonlight/60
The active icon inherits text-witch-amber from its wrapper, which in turn colors the sigil SVG via stroke="currentColor". The drop shadow creates the amber glow effect.

​
Hover incantation tooltip

When the user hovers over a nav item, the Latin incantation slides in from below using AnimatePresence and a motion.p element: 
<AnimatePresence>
  {isHovered && (
    <motion.p
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 10 }}
      className="text-xs italic text-witch-amber/70"
    >
      {item.incantation}
    </motion.p>
  )}
</AnimatePresence>
The tooltip animates from y: 10 (10px below) to y: 0 on enter, and back down on exit, giving it a gentle rising motion.

​
Adding a new nav item

To add a new route to the navigation bar:
  1. Create or import a sigil component from Sigils.js following the existing pattern.
  2. Append a new object to the navItems array in Navigation.js:
{ path: "/grimoire", label: "Grimoire", icon: GrimoireIcon, incantation: "Veritas Occulta" }
  1. Ensure the corresponding route is registered in the router configuration.
Keep incantation strings short — two to three Latin words. Longer strings will overflow the small tooltip area at narrow viewport widths.

Build docs developers (and LLMs) love

Get started for freeTalk to us