Site layout

View as Markdown
Open in ChatGPT Open in Claude

Your sites use a responsive layout:

  • Desktop: Three-column layout — sidebar (page tree), main content, table of contents

  • Tablet: Two-column layout — sidebar collapses to toggle

  • Mobile: Single-column layout — sidebar and TOC available via toggles

Capable Sites Layout

The site header contains:

  • Site logo and title (links to homepage)

  • Space switcher dropdown (if multiple spaces are assigned)

  • Search bar with full-text fuzzy search

  • Theme toggle (light/dark mode)

  • Sidebar toggle (on mobile)

Add up to 10 custom links to the site header (e.g., "Blog", "Support", "GitHub"). Each link has a title (max 100 characters) and URL.

#Space tabs

Enable the Show space tabs option to display a horizontal tab bar below the header, showing all assigned spaces. This provides quick navigation between spaces without using the dropdown.

#Sidebar page tree

Each space has a sidebar showing its page hierarchy as a collapsible tree. The current page is highlighted, and parent sections expand automatically. On mobile, the sidebar is hidden by default and accessible via a toggle button.

#Table of contents

A table of contents is automatically generated from the headings on each page and displayed in the right sidebar. On narrower screens, it collapses or is hidden.

Breadcrumb navigation is generated from the Confluence page hierarchy, showing the path from the space root to the current page.

A footer appears at the bottom of every page. You can set custom footer text (up to 500 characters) that appears above the default "Created with Capable Sites + Confluence" branding line.

Sites include built-in full-text search powered by Fuse.js. A search index is pre-built during site generation, covering all page titles and content. Visitors can search across all spaces from the search bar in the header.