A scaled overview navigation component. Register waypoints in your content and render a minimap that lets users jump between sections.

Introduction

This is the introduction section of the page.

Details

This is the details section of the page.

React
"use client"

import Minimap from "@radui/ui/Minimap"

const MinimapExample = () => {
    return (
        <div className="flex gap-8">
            <div className="flex-1 space-y-8">
                <Minimap.Waypoint value="section-intro" />
                <section id="section-intro">
                    <h3 className="font-semibold mb-2">Introduction</h3>
                    <p className="text-sm text-gray-600">This is the introduction section of the page.</p>
                </section>
                <Minimap.Waypoint value="section-details" />
                <section id="section-details">
                    <h3 className="font-semibold mb-2">Details</h3>
                    <p className="text-sm text-gray-600">This is the details section of the page.</p>
                </section>
            </div>
            <Minimap.Root>
                <Minimap.Track>
                    <Minimap.Content>
                        <Minimap.Item value="section-intro">
                            <Minimap.Bubble />
                            <Minimap.Line />
                        </Minimap.Item>
                        <Minimap.Item value="section-details">
                            <Minimap.Bubble />
                        </Minimap.Item>
                    </Minimap.Content>
                </Minimap.Track>
            </Minimap.Root>
        </div>
    )
}

export default MinimapExample

Import all parts of the component and piece them together

React
import Minimap from "@radui/ui/Minimap"

export default () => {
    return (
        <Minimap.Provider>
            <Minimap.Waypoint value="section" />
            <Minimap.Root>
                <Minimap.Track>
                    <Minimap.Content>
                        <Minimap.Item value="section">
                            <Minimap.Bubble />
                            <Minimap.Line />
                        </Minimap.Item>
                    </Minimap.Content>
                </Minimap.Track>
            </Minimap.Root>
        </Minimap.Provider>
    )
}

Registers a section in the minimap.

PropTypeDefault

id*

string--

label

string--
Edit this page on GitHub