Mobile Dropdown Demo
This page demonstrates the starlight-glide dropdown mobile preset with glassmorphism enabled globally.
If you’re on desktop, the preview above shows exactly how this page looks on a mobile device.
Features
Section titled “Features”- Interactive Dropdown: Tap the title bar in the preview to see the TOC sections.
- Progress Indicator: The circle around the current section title updates as you scroll.
- Glassmorphism: The dropdown menu and title bar use a translucent blur effect.
How to Enable
Section titled “How to Enable”Add this to your astro.config.mjs:
starlightGlide({ mobile: 'dropdown', glassmorphism: true,})Long Page Test
Section titled “Long Page Test”Scroll down to see the progress indicator in action.
Section One
Section titled “Section One”Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section Two
Section titled “Section Two”Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Subsection A
Section titled “Subsection A”Ut enim ad minim veniam.
Subsection B
Section titled “Subsection B”Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section Three
Section titled “Section Three”Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.