How to Use the Document Navigator Component

Getting Started

Learn how to use the Document Navigator component for creating table of contents with automatic scroll tracking and hierarchical navigation.

Installation

Integrate the component into your Next.js project to unlock seamless sidebar experiences. No custom configuration is required.

Basic Usage

Simply drop <TtpDocumentNavigator /> into your layout.

Features

The Document Navigator is designed for flexibility and intuitive navigation. Explore the rich set of features available:

Collapsible Sections

Group related pages and content together with simple, interactive section toggles.

Multi-level Nesting

Supports unlimited navigation depth for even the most complex information hierarchies.

Customizable Styles

Easily match the component styling to your app’s theme using Tailwind CSS utility classes.

Example Structure and Hierarchy Overview

Sample Sidebar

• Workspace
  • Home
  • Projects
    • Roadmap
    • Design Docs
    • Releases
      • v1.0
      • v2.0
  • Team
• Resources
  • Documentation
  • Tutorials

Best Practices

1. Keep navigation concise and well-organized.
2. Avoid too many nested levels to maintain clarity.
3. Highlight the current active section for user orientation.

FAQs

Can I customize the icons?

Yes, you can swap out the default icons for custom ones by providing your own React elements.

Is dark mode supported?

Absolutely! The component fully supports dark mode using Tailwind’s dark variant classes.