1 GitHub star = 1 new component.

Star the repo
Navigationanchorscrollside nav

On-Page Anchor Nav

Side menu for navigating between sections of a single page.

Usage

Copy and paste this code into your React component:

tsx
import { AnchorSideNav } from 'react-component-kit-ui/navigation';

<AnchorSideNav>Content</AnchorSideNav>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/AnchorSideNav.tsx + AnchorSideNav.css:

AnchorSideNav.tsx
'use client';

import './AnchorSideNav.css';

/** AnchorSideNav โ€” ported from astro-component-kit. */
export interface AnchorSideNavProps {
}

export function AnchorSideNav({}: AnchorSideNavProps) {
  return (
    <>
      <ul className="anchor-nav" data-rk-f60bfc="">
        <li data-rk-f60bfc=""><a href="#intro" className="active" data-rk-f60bfc="">Introduction</a></li>
        <li data-rk-f60bfc=""><a href="#features" data-rk-f60bfc="">Features</a></li>
        <li data-rk-f60bfc=""><a href="#pricing" data-rk-f60bfc="">Pricing</a></li>
        <li data-rk-f60bfc=""><a href="#faq" data-rk-f60bfc="">FAQ</a></li>
      </ul>
    </>
  );
}

export default AnchorSideNav;
AnchorSideNav.css
/* AnchorSideNav โ€” ported from astro-component-kit (navigation/AnchorSideNav.astro) */

.anchor-nav:where([data-rk-f60bfc]) { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; }
.anchor-nav:where([data-rk-f60bfc]) a:where([data-rk-f60bfc]) { display: block; padding: 0.4rem 1rem; color: #64748b; text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; margin-left: -1.5px; }
.anchor-nav:where([data-rk-f60bfc]) a.active:where([data-rk-f60bfc]) { color: #818cf8; border-left-color: #6366f1; }

Quick Info

Category
Navigation
Filename
AnchorSideNav.tsx
Dependencies
None โ€” pure React + CSS
Tags
anchorscrollside nav