Full Layout DemoLink to section

This page demonstrates the complete MarkdownLayout with both sidebars enabled. You have project navigation on the left and table of contents on the right!

OverviewLink to section

The full layout provides maximum navigation capabilities:

  • Left sidebar: Quick access to all projects
  • Right sidebar: Page navigation with scroll tracking
  • Center content: Main documentation or article

ConfigurationLink to section

Enable both features in your frontmatter:

---
tableOfContents: true
showSidebar: true
---

Layout BenefitsLink to section

Enhanced NavigationLink to section

With both sidebars, users can:

  • Switch between projects easily
  • Navigate within the current page
  • Keep context while reading

Professional DocumentationLink to section

This layout is ideal for comprehensive documentation sites where users need to:

  • Reference multiple projects
  • Navigate long documents
  • Maintain awareness of their location

Responsive BehaviorLink to section

The layout adapts gracefully to different screen sizes:

Desktop (xl and above)Link to section

  • All three columns visible
  • Full navigation capabilities

Tablet (lg to xl)Link to section

  • Project sidebar visible
  • Table of contents hidden
  • Content takes more space

Mobile (below lg)Link to section

  • Both sidebars hidden
  • Content takes full width
  • Clean reading experience

Content ConsiderationsLink to section

When using the full layout, consider:

Content WidthLink to section

The main content area is narrower due to both sidebars. This actually improves readability by creating an optimal line length.

Visual BalanceLink to section

The sidebars create a balanced, symmetric layout that feels professional and organized.

Information HierarchyLink to section

Users can quickly understand:

  • Where they are in the site (project sidebar)
  • Where they are on the page (table of contents)
  • What content is available

Best PracticesLink to section

When to Use Full LayoutLink to section

Perfect for:

  • API documentation
  • Multi-project documentation sites
  • Technical references
  • Learning resources

Content StructureLink to section

With full layout, ensure your content:

  • Has clear heading hierarchy
  • Uses descriptive section titles
  • Maintains logical flow
  • Includes relevant cross-references

Example Use CaseLink to section

Imagine documenting a suite of related tools:

  1. User lands on documentation for tmuxp
  2. Sees related projects in left sidebar
  3. Uses ToC to jump to specific features
  4. Easily switches to libtmux docs when needed

This creates a seamless documentation experience!

PerformanceLink to section

Despite having multiple components, the layout remains performant:

  • Sidebars use position: sticky for efficient scrolling
  • IntersectionObserver minimizes scroll event overhead
  • Components are optimized for minimal re-renders

AccessibilityLink to section

The full layout maintains accessibility with:

  • Proper ARIA labels
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management

Enjoy exploring the full capabilities of the MarkdownLayout system!

Return to the homepage