JuicyDocs logo JuicyDocs

Features

Explore the built-in features of JuicyDocs

JuicyDocs comes with many features out of the box. Here's an overview of what's included.

Core Features

The sidebar navigation is automatically generated from your content files using eleventyNavigation front matter:

  • Nested navigation with parent/child relationships
  • Active page highlighting
  • Mobile-friendly slide-out menu

Table of Contents

Every documentation page with headings (h2, h3, h4) automatically gets a table of contents:

  • Desktop: Shown in the right sidebar
  • Mobile: Accessible via the TOC button in the bottom navigation
  • Highlights current section as you scroll

Breadcrumb navigation shows the current page's location in the documentation hierarchy.

At the bottom of each documentation page, you'll find links to the previous and next pages in the navigation order.

Dark Mode

JuicyDocs supports three theme modes:

  • System - Follows your operating system preference
  • Light - Always light theme
  • Dark - Always dark theme

The theme switcher is located in the footer. User preference is saved to localStorage.

Mobile Experience

JuicyDocs is fully responsive with a mobile-optimized experience:

  • Bottom Navigation Bar - Quick access to Home, Search, TOC, and scroll-to-top
  • Slide-out Sidebar - Full navigation accessible via the menu button
  • Touch-friendly - Large tap targets and smooth interactions

Responsive Tables

All tables are automatically wrapped in <table-saw> for responsive behavior on mobile devices. Tables scroll horizontally when they don't fit the screen width.

To opt-out for a specific table, add the data-table-saw="none" attribute:

<table data-table-saw="none">
  ...
</table>

External links (starting with http:// or https://) are automatically enhanced:

  • Opens in a new tab (target="_blank")
  • Adds rel="noopener" for security

This helps users stay on your documentation while exploring external resources.

Accessibility

JuicyDocs includes several accessibility enhancements:

  • Keyboard-accessible code blocks - All <pre> elements have tabindex="0" for keyboard navigation
  • Skip to content link - Screen reader users can skip navigation
  • Proper heading hierarchy - Semantic HTML structure
  • Focus indicators - Visible focus states for keyboard navigation
  • Color contrast - Meets WCAG guidelines in both light and dark modes