Mobile Reading Bar

A frosted reading header with scroll-spy, a jumping section pill, and a compact table of contents.

Preview

Installation

pnpm dlx shadcn@latest add https://buxx.me/r/mobile-reading-bar

Usage

Astro

---
import MobileReadingBar from '@/components/ui/mobile-reading-bar.astro';

const sections = [
  { id: 'introduction', title: 'Introduction' },
  { id: 'details', title: 'Details' },
];
---

<MobileReadingBar sections={sections} />

---
import MobileReadingBar from '@/components/ui/mobile-reading-bar.astro';

const sections = [
  { id: 'introduction', title: 'Introduction' },
  { id: 'details', title: 'Details' },
];
---

<MobileReadingBar sections={sections} />

Credits

Original mobile reading navigation by Bunizao.

View source Components