Nav With Theme Toggle
A navbar with the name mark on the left, four nav links in the center, and a static sun and moon theme toggle button on the right.
A navbar with the name mark on the left, four nav links in the center, and a static sun and moon theme toggle button on the right.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Nav With Theme Toggle is a standard left-name, center-nav, right-toggle header: the name mark Avery Stone anchors the left, four links, Work, About, Services, and Contact, sit in the middle, and a ghost icon button showing a sun or moon glyph sits on the right. The toggle is a static blueprint using CSS dark-mode scale transforms; it renders correctly in the preview and wires to a theme provider in the real app.
Nav links are one array. The sun and moon icons use opposite scale transitions so only one is visible at a time. The static blueprint approach is the distinctive detail, no Radix portal, no useState, no SSR flash.
Reach for this block as the site header when the portfolio supports both light and dark modes and the visitor preference toggle is part of the design. The installer replaces the name, the nav links, and connects the button to their theme provider.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the modern personal-site header with theme switching. Other navbar uses:
Tip: ship the toggle as a static blueprint first, then wire it to next-themes or your own context once the site is running, it looks finished either way.