Floating Island Navbar
A free floating navbar component with direction-aware reveal, a native mobile disclosure and configurable top or bottom placement.
Steel frames, built to measure in Cumbria
Eleven frames a year, and yours is measured before it is drawn.
The 2027 list opens in October and closes at eleven names. A fit session in the workshop comes first, and the fee comes off the frame if the numbers persuade you.
01 / Frames
Three frames, drawn for three kinds of week
The Fell is a 953 road frame that comes in under 1,500g. The Drover clears 47mm tyres and carries a rack without a bodge. The Marsh is the track frame, and the only one built to stock.
02 / Geometry
Measured on the bike you already ride
A fit session starts on your own bike with the jig beside it, so every number we cut to is a considered change from something real rather than a guess off a height chart.
03 / Workshop
Cut, mitred and brazed by one pair of hands
The same builder takes a frame from tube order to final alignment, and signs the inside of the seat tube where only the next mechanic will ever find it.
04 / Journal
What the last eleven frames taught us
Notes on tubing that behaved unexpectedly, paint that survived a Cumbrian winter, and the seatstay detail we stopped drawing after one season of road salt.
October, and then not again until next year
Put your name down for a fit session.
Customise
Code
<FloatingIslandNavbar
logo={<a href="/">Camlan</a>}
links={[
{ label: "Frames", href: "#frames" },
{ label: "Geometry", href: "#geometry" },
{ label: "Workshop", href: "#workshop" },
{ label: "Journal", href: "#journal" },
]}
cta={{ label: "Join the 2027 list", href: "#list" }}
activeHref="#frames"
/>Floating Island Navbar is a free navbar component for Next.js and React, styled with Tailwind and animated with Motion. The detached capsule stays visible near the top of the page, steps aside after intentional downward scrolling, and springs back when the visitor moves upward, focuses a link or opens the mobile navigation.
The component updates React state only when its visible state changes, not on every scroll frame. Below the md breakpoint, a native details and summary disclosure keeps every anchor available without JavaScript. Reduced-motion visitors get a static island with an instant or short opacity-only disclosure, and the six Tier 3 tokens make the surface, active link, border and focus treatment adapt cleanly to light or dark themes.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/nav-floating-islandUsage
import { FloatingIslandNavbar } from "@/components/nav-floating-island";
const links = [
{ label: "Features", href: "/features" },
{ label: "Customers", href: "/customers" },
{ label: "Pricing", href: "/pricing" },
];
export default function Page() {
return (
<>
<FloatingIslandNavbar
logo={<a href="/">Northstar</a>}
links={links}
cta={{ label: "Start a workspace", href: "/start" }}
activeHref="/features"
/>
<main>{/* landing page */}</main>
</>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | required | Brand mark or brand link in the leading slot. |
| links | FloatingNavLink[] | required | Primary anchors in display order. An empty array leaves only the brand and optional CTA. |
| cta | { label: string; href: string } | undefined | Optional trailing call-to-action anchor. |
| activeHref | string | undefined | Matching link receives aria-current set to page and the static active shape. |
| label | string | "Main" | Accessible name for the nav landmark. |
| position | "top" | "bottom" | "top" | Viewport edge used by the fixed island. |
| hideOnScroll | boolean | true | Enables direction-aware auto-hide beyond the 96 pixel top threshold. |
| edgeOffset | number | 16 | Distance from the chosen viewport edge in pixels, clamped from 8 to 32. |
| radius | number | 24 | Island and mobile-popover corner radius in pixels, clamped from 16 to 32. |
| className | string | undefined | Additional classes merged onto the fixed header root. |
Customisation
Floating Island Navbar exposes Tier 3 tokens for its surface, text, muted copy, border, active link and focus ring. Geometry stays in the typed edgeOffset and radius props, while position and hideOnScroll control the real behaviour. Override tokens in your theme without editing the component:
:root {
--nav-island-surface: var(--surface);
--nav-island-active: var(--primary);
--nav-island-focus: var(--ring);
}
<FloatingIslandNavbar
logo={<a href="/">Northstar</a>}
links={links}
position="bottom"
edgeOffset={24}
radius={30}
/>Frequently asked questions
- Is Floating Island Navbar free for commercial use?
- Yes. Floating Island Navbar is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Floating Island Navbar work for keyboard and reduced-motion users?
- The component uses real anchors inside labelled header and nav landmarks. Mobile navigation is a native details disclosure, Escape closes it and focus remains visible throughout. Keyboard focus or an open disclosure forces the island on screen. With reduced motion enabled, scroll hiding and movement are disabled while every link remains immediately usable.
- Can I change the island position, spacing and shape?
- Yes. Set position to top or bottom, edgeOffset from 8 to 32 pixels and radius from 16 to 32 pixels. The playground changes these geometry props directly, while Tier 3 tokens control the surface, border, active state and focus ring.