Side Dots Navigation

Navbar114: Side Dots Navigation

A minimal sticky bar with the brand and one button, paired with a column of section dots fixed at the right edge of the screen. Hovering or focusing a dot slides its label out, clicking scrolls to that section, and the active dot follows the scroll on its own. On a phone the dots move into a floating row at the bottom with the current section name, which opens a numbered list of every section above it. The block renders the demo sections the dots observe.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/navbar114?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/navbar114?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar114.tsx plus the shadcn button primitive it uses.

Quick start

The installed file exports navbar114Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Navbar114, navbar114Demo } from "@/components/beste/block/navbar114";

export default function Page() {
  return <Navbar114 {...navbar114Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Navbar114 } from "@/components/beste/block/navbar114";

export default function Page() {
  return (
    <Navbar114
      brand="Meridian"
      sections={[
        { label: "Overview", heading: "One calm place for every project", description: "Plans, files and decisions in one timeline." },
        { label: "Planning", heading: "Plans that stay honest", description: "Milestones move when the work moves." },
        { label: "Pricing", heading: "Free for teams of five", description: "One price per active seat." },
      ]}
      actions={[{ label: "Start free", href: "/signup" }]}
      labels={{ sections: "Page sections", open: "Show all sections", close: "Hide sections", goTo: "Go to" }}
    />
  );
}

Props

type Section = {
  label: string;
  heading: string;
  description: string;
  image?: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "ghost" | "secondary";
};

Behavior notes

• An IntersectionObserver with a -50% 0px -50% 0px root margin watches every section, so the active dot changes exactly when a section crosses the middle of the viewport.
• Clicking a dot calls scrollIntoView, smooth unless the visitor prefers reduced motion; sections carry scroll-mt-16 so the sticky bar never covers a heading.
• Desktop labels stay hidden until hover or keyboard focus, except the active one, and every dot sets aria-current when its section is in view.
• The mobile section list is always rendered and toggled with CSS classes, carrying aria-hidden and inert while closed; the toggle shows the current section name with aria-expanded, and Escape closes it.
• Choosing a section in the mobile list scrolls to it and closes the list.