Navigation anchorscrollside nav

On-Page Anchor Nav

Side menu for navigating between sections of a single page.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { On-PageAnchorNav } from 'astro-component-kit';
---

<AnchorSideNav>Content</AnchorSideNav>
--- import { On-PageAnchorNav } from 'astro-component-kit'; --- <AnchorSideNav>Content</AnchorSideNav>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/On-PageAnchorNav.astro and paste the following code:

astro 
---
---
<ul class="anchor-nav">
  <li><a href="#intro" class="active">Introduction</a></li>
  <li><a href="#features">Features</a></li>
  <li><a href="#pricing">Pricing</a></li>
  <li><a href="#faq">FAQ</a></li>
</ul>
<style>
  .anchor-nav { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; }
  .anchor-nav a { 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 a.active { color: #818cf8; border-left-color: #6366f1; }
</style>
--- --- <ul class="anchor-nav"> <li><a href="#intro" class="active">Introduction</a></li> <li><a href="#features">Features</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#faq">FAQ</a></li> </ul> <style> .anchor-nav { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; } .anchor-nav a { 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 a.active { color: #818cf8; border-left-color: #6366f1; } </style>

Quick Info

Category
Navigation
Filename
On-PageAnchorNav.astro
Dependencies
None — pure Astro + CSS
Tags
anchorscrollside nav